Question

我有一个本机应用程序，我在其中询问有关进行中的调查的问题，并以定制的卡片组件形式呈现每个问题：

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组件之间通过调查和回答数据，然后再次将此数据发布到DB。

任何帮助将不胜感激。

谢谢。

更新

首先，谢谢您的回答。我做了你所说的一切，除了一件事情外，它就像一种魅力，但我相信这是我造成的。我创建了一个场景，当用户按下答案时，

  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最初设置为空。

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

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

Answer 1

将问题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}
/>

在组件之间传递值-React Native

1 个答案: