时间戳

首页 > 解决方案 > 根据 React Native 中的答案更改测验中按钮的颜色

react-native - 根据 React Native 中的答案更改测验中按钮的颜色

问题描述

我有一个用 React Native 编写的测验。当用户按下正确答案时，我希望按钮变为绿色，然后再转到下一个问题。如果错了，我希望正确答案变成绿色，按下的按钮变成红色。我对 React 很陌生，不确定如何仅更改特定按钮的状态。现在看起来如何，当我为所有按钮设置背景颜色时，所有按钮都变为红色/绿色。

测验画面：

  state = {
    correctCount: 0,
    totalCount: this.props.navigation.getParam("questions", []).length,
    activeQuestionIndex: 0,
    answered: false,
    answerCorrect: false,
    btnColor: {backgroundColor: '#FFDD7C'}
  };

  answer = correct => {
    this.setState(
      state => {
        const nextState = { answered: true };

        if (correct) {
          nextState.correctCount = state.correctCount + 1;
          nextState.answerCorrect = true;
          nextState.btnColor = {backgroundColor: '#00ff00'};
        } else {
          nextState.answerCorrect = false;
          nextState.btnColor = {backgroundColor: '#ff0000'};
        }

        return nextState;
      },
      () => {
        setTimeout(() => this.nextQuestion(), 750);
      }
    );
  };

  nextQuestion = () => {
    this.setState(state => {
      const nextIndex = state.activeQuestionIndex + 1;

      if (nextIndex >= state.totalCount) {
        this.props.navigation.navigate('QuizStatsScreen', {
          totalQuizCount: state.totalCount,
          correctQuizCount: state.correctCount
        });
      } else {
        return {
          activeQuestionIndex: nextIndex,
          answered: false,
          btnColor: {backgroundColor: '#FFDD7C'}
        }
      }
    });
  };

  render() {
    const questions = this.props.navigation.getParam("questions", []);
    const question = questions[this.state.activeQuestionIndex];

    return (
      <View>
        <StatusBar barStyle="light-content" />
        <SafeAreaView style={styles.safearea}>
          <View>
            <Text style={styles.text}>{question.question}</Text>

            <ButtonContainer>
              {question.answers.map(answer => (
                <Button
                  key={answer.id}
                  text={answer.text}
                  onPress={() => this.answer(answer.correct)}
                  style={this.state.btnColor}
                  correct={this.state.answerCorrect}
                />
              ))}
            </ButtonContainer>
          </View>
        </SafeAreaView>
      </View>
    );
  }
}

按键画面：

export const Button = ({ correct, text, style, onPress = () => {} }) => {

  return (
    <TouchableOpacity onPress={onPress} style={[styles.button, {...style}]}>
      <Text style={styles.text}>{text}</Text>
    </TouchableOpacity>
  );
};

标签： react-native

解决方案

您可以使用另外一个变量作为 selectedId 并处于您的状态。当您单击任何答案时，然后检查答案是对还是错，如果对或错，则将 answerCorrect 设置为 true，然后存储您的正确并将 answer.id 存储到 selectedId 状态。

                <Button
                 ....
                  style={               
                      answer.id === selectedId && answerCorrect ? 
                      styleForCorrectAnswer : 
                      answer.id === selectedId && !answerCorrect ?
                       styleForWrongAnswer :
                      styleForDefaultAnswer
                   }
                />

我们在这里所做的是首先检查我们的 answer.id 是否与所选答案 id 匹配并且答案是否正确。如果是，那么我们给出 styleForCorrectAnswer 否则我们在这里检查 answer.id 和 selectedId 是否匹配并且用户的答案是错误的，那么我们将应用 styleForWrongAnswer 否则 styleForDefaultAnswer

推荐阅读