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