Блог

У меня есть приложение react-native, в котором я задаю вопросы о текущем опросе, и я отображаю каждый вопрос в виде компонента, созданного на заказ:

 const { cardTitle, cardDescription, onYesPress, onNoPress } = this.props;
   return (
      <View style={styles.container}>
        <Card containerStyle={styles.votingCardContainer} title={cardTitle}>
          <View style={styles.votingCard}>
            <Text style={{ alignItems: 'center', fontSize: 23 }}>
              {cardDescription}
            </Text>
            <View style={styles.buttonRow}>
              <View style={styles.buttonContainer}>
                <CustomIconButton
                  onPress={onYesPress}
                  iconName={icons.YES}
                  iconColor={'green'}
                  iconSize={70}
                />
              </View>
              <View style={styles.buttonContainer}>
                <CustomIconButton
                  onPress={onNoPress}
                  iconName={icons.NO}
                  iconColor={'red'}
                  iconSize={70}
                />
              </View>
            </View>
          </View>
        </Card>
      </View>
    );
 

когда пользователи входят в систему, я получаю вопросы опроса из БД и отображаю их в виде OnGoingSurvey компонента в MainScreen компоненте.

           <OnGoingSurveyCard
            onYesPress={this.handleYesPress}
            onNoPress={this.handleNoPress}
            cardTitle={"Question Title "}
            cardDescription={"Question Description?"}
          />
 

Как вы можете видеть OnGoingSurvey , имеет две кнопки, Yes и No. Мне нужно знать, на какой вопрос отвечает пользователь и каков его / ее ответ. Но я не знаю, как передавать данные опроса и ответов между OnGoingSurvey MainScreen компонентами и и снова отправлять эти данные в БД.

Любая помощь будет оценена.

Спасибо.

Обновить

Прежде всего, спасибо за ваш ответ. Я сделал все, что вы сказали, и это работает как шарм, за исключением одной вещи, но я уверен, что это вызвано мной. Я создаю сценарий, в котором, когда пользователь нажимает ответ,

   handleAnswerPress = (yesPressed, questionId) => {
    if (yesPressed) {
      this.setState({
        surveyAnswer: 'Yes',
        whichSurvey: questionId,
      });
    } else {
      this.setState({
        surveyAnswer: 'No',
        whichSurvey: questionId,
      });
    }
    console.warn(this.state.whichSurvey, this.state.surveyAnswer);
  };
 

где questionId и questionAnswer изначально было установлено значение null.

    this.state = {
      whichSurvey: null,
      surveyAnswer: null,
    };
  }
 

когда я нажал одну из этих кнопок, первое нажатие warn questionId : null questionAnswer : null , а второй вывод — это тот, который я нажал раньше. например, если я нажал yes, а затем no, сначала отображается null null, а затем questionId и no

Передайте вопрос id в OnGoingSurveyCard

           <OnGoingSurveyCard
            id={1}
            onYesPress={this.handleYesPress}
            onNoPress={this.handleNoPress}
            cardTitle={"Question Title "}
            cardDescription={"Question Description?"}
          />
 

Затем передавайте идентификатор, когда пользователь нажимает любую из кнопок

 const { id, cardTitle, cardDescription, onYesPress, onNoPress } = this.props;
   return (
      <View style={styles.container}>
        <Card containerStyle={styles.votingCardContainer} title={cardTitle}>
          <View style={styles.votingCard}>
            <Text style={{ alignItems: 'center', fontSize: 23 }}>
              {cardDescription}
            </Text>
            <View style={styles.buttonRow}>
              <View style={styles.buttonContainer}>
                <CustomIconButton
                  onPress={(e) => onYesPress(id)}
                  iconName={icons.YES}
                  iconColor={'green'}
                  iconSize={70}
                />
              </View>
              <View style={styles.buttonContainer}>
                <CustomIconButton
                  onPress={(e) => onNoPress(id)}
                  iconName={icons.NO}
                  iconColor={'red'}
                  iconSize={70}
                />
              </View>
            </View>
          </View>
        </Card>
      </View>
    );
 

Затем handleYessPress введите, и handleNoPress вы можете получить его следующим образом:

 handleYesPress = id => {
    //id is the id of question
}
 

Я бы также посоветовал вам использовать только одну функцию, если они примерно одинаковые (похоже, что так):

 handlePress = (yesPressed, questionId) => {
      this.setState({
        surveyAnswer: yesPressed ? "Yes" : "No",
        whichSurvey: questionId,
      });
}

<OnGoingSurveyCard
  id={1}
  handlePress={this.handlePress}
  cardTitle={"Question Title "}
  cardDescription={"Question Description?"}
/>

//YES BUTTON
<CustomIconButton
    onPress={(e) => handlePress(true, id)}
    iconName={icons.YES}
    iconColor={'green'}
    iconSize={70}
/>

//NO BUTTON
<CustomIconButton
    onPress={(e) => handlePress(false, id)}
    iconName={icons.NO}
    iconColor={'red'}
    iconSize={70}
/>