Как динамически установить стиль при нажатии, когда есть еще кнопки? - PullRequest
0 голосов
/ 28 сентября 2019

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

<Content>
    <View style={styles.gutter}>
        <View style={styles.container}>
            <View style={styles.content}>
                {index < quiz.questions.length && <Text>{current.question}</Text>}
                {index === quiz.questions.length && (
                    <Text>Quiz complete {`${rightAnswers}/${quiz.numberOfQuestions}`}</Text>
                )}
            </View>
            {index < quiz.questions.length && (
                <View style={styles.buttons}>
                    <Button
                        style={styles.button}
                        label={quiz.answers.option1}
                        onPress={() => {
                            if (quiz.answers.option1 === current.rightAnswer) {
                                this.setState({ index: index + 1, rightAnswers: rightAnswers + 1 });
                            } else {
                                this.setState({ index: index + 1, wrongAnswers: wrongAnswers + 1 });
                            }
                        }}
                    />
                    <Button
                        style={styles.button}
                        label={quiz.answers.option2}
                        onPress={() => {
                            if (quiz.answers.option2 === current.rightAnswer) {
                                this.setState({ index: index + 1, rightAnswers: rightAnswers + 1 });
                            } else {
                                this.setState({ index: index + 1, wrongAnswers: wrongAnswers + 1 });
                            }
                        }}
                    />
                    <Button
                        style={styles.button}
                        label={quiz.answers.option3}
                        onPress={() => {
                            if (quiz.answers.option3 === current.rightAnswer) {
                                this.setState({ index: index + 1, rightAnswers: rightAnswers + 1 });
                            } else {
                                this.setState({ index: index + 1, wrongAnswers: wrongAnswers + 1 });
                            }
                        }}
                    />
                </View>
            )}
        </View>
    </View>
</Content>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...