我创建了一个带有两个选项的小表单。基本上我希望用户选择一个选项并在状态“首选项”中传递该值(并进一步在 firebase 中传递该值)。我不确定我使用“If Condition”在选项之间进行选择的方法是否正确，因为我是 Javascript 和 React Native 初学者。
您将如何用代码来解决这个问题？
export default class ChooseOption extends Component {
state = {
option1: false,
option2: false,
preference: ''
}
chooseFirst = () => {
if (this.state.option1 == false) {
this.setState({ option1: true})
this.setState({ option2: false })
}
}
chooseSecond = () => {
if (this.state.option2 == false) {
this.setState({option2: true})
this.setState({option1: false})
}
}
render() {
return(
<View style={styles.container}>
<Text style={styles.greeting}>Select one option:</Text>
<View style={styles.form}>
<TouchableOpacity
onPress={this.chooseFirst}
style={{flexDirection:'row', alignItems: 'center'}}>
<Icon
name={this.state.option1 ? 'md-radio-button-on' : 'md-radio-button-off'}
size={30}
color= {this.state.option1 ? 'green' : 'gray'}
/>
<Text
style={this.state.option1 ? styles.textOn : styles.textOff}>First Option</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={this.chooseSecond}
style={{marginTop: 30, flexDirection:'row', alignItems: 'center'}}>
<Icon
name={this.state.option2 ? 'md-radio-button-on' : 'md-radio-button-off'}
size={30}
color= {this.state.option2 ? 'green' : 'gray'}
/>
<Text
style={this.state.option2 ? styles.textOn : styles.textOff}>Second Option</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
greeting: {
marginHorizontal: 30,
marginTop: 307,
fontSize: 30,
lineHeight: 40,
},
form: {
marginTop: 39,
marginBottom: 115,
marginHorizontal: 30
},
textOff: {
color: 'gray',
fontSize: 28,
textTransform: 'none',
letterSpacing: 2,
left: 10
},
textOn: {
color: 'green',
fontSize: 28,
textTransform: 'none',
letterSpacing: 2,
left: 10
},
})
最佳答案
如果您想使用 bool 值来跟踪所选选项，那么我会使用一个变量，因为在单选按钮的情况下一次只能选择一个，因此第二个 bool 值是多余的。下面是一个这样做的例子:
export default class ChooseOption extends Component {
constructor(props) {
super(props);
this.state = {
isOption1Selected: true,
preference: '',
};
}
render() {
return (
<View style={styles.container}>
<Text style={styles.greeting}>Select one option:</Text>
<View style={styles.form}>
<TouchableOpacity
onPress={() => this.setState({ isOption1Selected: true })}
style={{ flexDirection: 'row', alignItems: 'center' }}>
<View
name={this.state.isOption1Selected ? 'md-radio-button-on' : 'md-radio-button-off'}
size={30}
color={this.state.isOption1Selected ? 'green' : 'gray'}
/>
<Text
style={this.state.isOption1Selected ? styles.textOn : styles.textOff}>First Option</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => this.setState({ isOption1Selected: false })}
style={{ marginTop: 30, flexDirection: 'row', alignItems: 'center' }}>
<View
name={!this.state.isOption1Selected ? 'md-radio-button-on' : 'md-radio-button-off'}
size={30}
color={!this.state.isOption1Selected ? 'green' : 'gray'}
/>
<Text
style={!this.state.isOption1Selected ? styles.textOn : styles.textOff}>Second Option</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
但是想象一下，如果您必须添加更多选项，那么最好跟踪所选选项的 ID，您可以通过这种方式实现:
export default class ChooseOption extends Component {
constructor(props) {
super(props);
this.state = {
selectedOptionId: 0,
preference: '',
};
}
render() {
const { selectedOptionId } = this.state;
return (
<View style={styles.container}>
<Text style={styles.greeting}>Select one option:</Text>
<View style={styles.form}>
<TouchableOpacity
onPress={() => this.setState({ selectedOptionId: 0, preference: 'First option' })}
style={{ flexDirection: 'row', alignItems: 'center' }}>
<View
name={selectedOptionId === 0 ? 'md-radio-button-on' : 'md-radio-button-off'}
size={30}
color={selectedOptionId === 0 ? 'green' : 'gray'}
/>
<Text
style={selectedOptionId === 0 ? styles.textOn : styles.textOff}>First Option</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => this.setState({ selectedOptionId: 1, preference: 'Second option' })}
style={{ marginTop: 30, flexDirection: 'row', alignItems: 'center' }}>
<View
name={selectedOptionId === 1 ? 'md-radio-button-on' : 'md-radio-button-off'}
size={30}
color={selectedOptionId === 1 ? 'green' : 'gray'}
/>
<Text
style={selectedOptionId === 1 ? styles.textOn : styles.textOff}>Second Option</Text>
</TouchableOpacity>
<TouchableOpacity
onPress={() => this.setState({ selectedOptionId: 2, preference: 'Third option' })}
style={{ marginTop: 30, flexDirection: 'row', alignItems: 'center' }}>
<View
name={selectedOptionId === 2 ? 'md-radio-button-on' : 'md-radio-button-off'}
size={30}
color={selectedOptionId === 2 ? 'green' : 'gray'}
/>
<Text
style={selectedOptionId === 2 ? styles.textOn : styles.textOff}>Third Option</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
最后，您可以编写一个函数来从预定义数组生成所有选项，以便您的代码保持干净:
const options = [
{ id: 0, text: 'First option'},
{ id: 1, text: 'Second option'},
{ id: 2, text: 'Third option'},
]
export default class ChooseOption extends Component {
constructor(props) {
super(props);
this.state = {
selectedOptionId: 0,
preference: '',
};
}
createOption(optionData) {
const { selectedOptionId } = this.state;
const { id, text } = optionData;
return (
<TouchableOpacity
key={id}
onPress={() => this.setState({ selectedOptionId: id, preference: text })}
style={{ flexDirection: 'row', alignItems: 'center' }}>
<View
name={selectedOptionId === id ? 'md-radio-button-on' : 'md-radio-button-off'}
size={30}
color={selectedOptionId === id ? 'green' : 'gray'}
/>
<Text
style={selectedOptionId === id ? styles.textOn : styles.textOff}>{text}</Text>
</TouchableOpacity>
);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.greeting}>Select one option:</Text>
<View style={styles.form}>
{
options.map((op) => this.createOption(op))
}
</View>
</View>
);
}
}
更新
如果您想在选择时在控制台中打印首选项，您可以通过调用 TouchableOpacity 中的自定义函数来执行与第一次类似的操作，但方式略有不同:onPress={() => this.select(id, text)}。然后定义这个函数:
select(id, text) {
this.setState({ selectedOptionId: id, preference: text });
console.log(text);
}
关于javascript - 如何在 React Native 中存储状态值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58398325/