在组件之间传递值 - React Native

Question

我有一个 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 有两个按钮，是和否。我需要知道用户回答了哪个问题以及他/她的回答是什么。但我不知道如何在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,
    };
  }

当我按下其中一个按钮时，第一次按下警告 questionId : null questionAnswer : null ，第二个输出是我之前按下的那个。例如，如果我按下是然后否，它首先显示 null null 然后 questionId 和 no

Answer 1

将问题id 传递给OnGoingSurveyCard

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

然后在用户点击任何按钮时传递 id

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}
/>