我正在尝试创建测验，如果用户按下右键，则其背景变为绿色，否则，其变为红色。问题组件具有五个属性（四个问题选择和一个答案），myfunction将答案和选择进行比较，如果它们相等，则我希望此选项的背景变为绿色，否则要变为红色，但是我不确定该怎么做
import React from "react";
import {
StyleSheet,
Text,
View,
ScrollView,
TouchableOpacity,
ImageBackground
} from "react-native";
class Question extends React.Component {
constructor(props) {
super(props);
this.myfunction = this.myfunction.bind(this);
}
state = {
// possible backgrounds of choices. default is grey.
grey: "rgba(52, 52, 52, 0.3)",
red: "rgba(255, 0, 0, 0.3)",
green: "rgba(0, 255, 0, 0.3)"
};
myfunction(f1, f2) {
if (f1 == f2) {
console.warn("Right choice"); //to test it
} else {
console.warn("Wrong choice");
}
}
render() {
return (
<View style={{ height: 280, width: 360, flex: 1 }}>
<View
style={{
flex: 1,
flexDirection: "row"
}}
>
<TouchableOpacity // first option A
name="a"
style={{
flex: 1,
backgroundColor: this.state.notral,
justifyContent: "center",
alignItems: "center"
}}
onPress={() =>
this.myfunction(
this.props.answer,
this.props.f0,
this.children.backgroundColor
)
}
>
<Text style={{ fontSize: 23, textAlign: "center", color: "white" }}>
{this.props.f0}
</Text>
</TouchableOpacity>
<TouchableOpacity // second option B
name="b"
style={{
flex: 1,
backgroundColor: this.state.notral,
justifyContent: "center",
alignItems: "center"
}}
onPress={() => this.myfunction(this.props.answer, this.props.f1)}
>
<Text style={{ fontSize: 23, textAlign: "center", color: "white" }}>
{this.props.f1}
</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 1, flexDirection: "row" }}>
<TouchableOpacity
name="c"
style={{
flex: 1,
backgroundColor: this.state.notral,
justifyContent: "center",
alignItems: "center"
}}
onPress={() => this.myfunction(this.props.answer, this.props.f2)}
>
<Text style={{ fontSize: 23, textAlign: "center", color: "white" }}>
{this.props.f2}
</Text>
</TouchableOpacity>
<TouchableOpacity
name="d"
style={{
flex: 1,
backgroundColor: this.state.notral,
justifyContent: "center",
alignItems: "center"
}}
onPress={() => this.myfunction(this.props.answer, this.props.f3)}
>
<Text style={{ fontSize: 23, textAlign: "center", color: "white" }}>
{this.props.f3}
</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
export default class App extends React.Component {
render() {
return (
<ScrollView>
<View style={styles.container}>
<View style={{ flex: 1 }}>
<Text
style={{
fontSize: 30,
textAlign: "center",
marginTop: 35,
marginBottom: 25
}}
onPress={this.myfunction}
>
Which one is the right answer?
</Text>
<ImageBackground
style={{ height: 280, width: 360, flex: 1 }}
source={require("./assets/wol.jpg")} // wolf of wall street scene. question itself is this image.
>
<Question
style={{ height: 280, width: 360, flex: 1 }}
f0="Gone Girl"
f1="Wolf of Wall Street"
f2="Us"
f3="Skin That I Live In"
answer="Wolf of Wall Street"
/>
</ImageBackground>
</View>
</View>
</ScrollView>
);
}
}
答案 0 :(得分：0)
我认为一种简单的方法是为每个按钮的颜色状态创建一个变量。然后在点击功能时，可以将其更改为另一种颜色
class Question extends React.Component {
constructor(props) {
super(props);
this.myfunction = this.myfunction.bind(this);
}
state = {
f0color: "rgba(52, 52, 52, 0.3)",
f1color: "rgba(52, 52, 52, 0.3)",
f2color: "rgba(52, 52, 52, 0.3)",
f3color: "rgba(52, 52, 52, 0.3)",
// possible backgrounds of choices. default is grey.
grey: "rgba(52, 52, 52, 0.3)",
red: "rgba(255, 0, 0, 0.3)",
green: "rgba(0, 255, 0, 0.3)"
};
myfunction(f1, f2, colorState) {
if (f1 == f2) {
this.setState({
[colorState] : "rgba(0, 255, 0, 0.3)"
})
this.state[colorState]
console.warn("Right choice"); //to test it
} else {
this.setState({
[colorState] : "rgba(255, 0, 0, 0.3)"
})
this.state[colorState]
console.warn("Wrong choice");
}
}
render() {
return (
<View style={{ height: 280, width: 360, flex: 1 }}>
<View
style={{
flex: 1,
flexDirection: "row"
}}
>
<TouchableOpacity // first option A
name="a"
style={{
flex: 1,
backgroundColor: this.state.f0color,
justifyContent: "center",
alignItems: "center"
}}
onPress={() =>
this.myfunction(
this.props.answer,
this.props.f0,
'f0color'
)
}
>
<Text style={{ fontSize: 23, textAlign: "center", color: "white" }}>
{this.props.f0}
</Text>
</TouchableOpacity>
<TouchableOpacity // second option B
name="b"
style={{
flex: 1,
backgroundColor: this.state.f1color,
justifyContent: "center",
alignItems: "center"
}}
onPress={() => this.myfunction(this.props.answer, this.props.f1, 'f1color')}
>
<Text style={{ fontSize: 23, textAlign: "center", color: "white" }}>
{this.props.f1}
</Text>
</TouchableOpacity>
</View>
<View style={{ flex: 1, flexDirection: "row" }}>
<TouchableOpacity
name="c"
style={{
flex: 1,
backgroundColor: this.state.f2color,
justifyContent: "center",
alignItems: "center"
}}
onPress={() => this.myfunction(this.props.answer, this.props.f2, 'f2color')}
>
<Text style={{ fontSize: 23, textAlign: "center", color: "white" }}>
{this.props.f2}
</Text>
</TouchableOpacity>
<TouchableOpacity
name="d"
style={{
flex: 1,
backgroundColor: this.state.f3color,
justifyContent: "center",
alignItems: "center"
}}
onPress={() => this.myfunction(this.props.answer, this.props.f3, 'f3color')}
>
<Text style={{ fontSize: 23, textAlign: "center", color: "white" }}>
{this.props.f3}
</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
export default class App extends React.Component {
render() {
return (
<ScrollView>
<View style={styles.container}>
<View style={{ flex: 1 }}>
<Text
style={{
fontSize: 30,
textAlign: "center",
marginTop: 35,
marginBottom: 25
}}
onPress={this.myfunction}
>
Which one is the right answer?
</Text>
<ImageBackground
style={{ height: 280, width: 360, flex: 1 }}
source={require("./assets/wol.jpg")} // wolf of wall street scene. question itself is this image.
>
<Question
style={{ height: 280, width: 360, flex: 1 }}
f0="Gone Girl"
f1="Wolf of Wall Street"
f2="Us"
f3="Skin That I Live In"
answer="Wolf of Wall Street"
/>
</ImageBackground>
</View>
</View>
</ScrollView>
);
}
}