[英]How to store a value in a state in React Native?
我創建了一個帶有兩個選項的小表單。 基本上我希望用戶選擇一個選項並在 state“首選項”中傳遞該值(並進一步在 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
},
})
如果您想使用布爾值來跟蹤所選選項,那么我將 go 與一個變量,因為在單選按鈕的情況下,一次只能選擇一個,因此第二個 boolean 是多余的。 這是一個這樣做的例子:
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>
);
}
}
最后你可以編寫一個 function 來從預定義的數組中生成所有選項,這樣你的代碼就會保持干凈:
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 中調用自定義 function 來執行與第一次類似的操作,但方式有所不同: onPress={() => this.select(id, text)}
. 然后定義這個 function 像:
select(id, text) {
this.setState({ selectedOptionId: id, preference: text });
console.log(text);
}
選擇什么? 讓我們假設它的主題:option1(深色)和 option2(淺色)
讓我們說它的主題選項
const THEMES = {
DARK: "dark",
LIGHT: "light"
};
state = {
selectedTheme : undefined,
preference: ''
}
chooseFirst = () => {
this.setState({ selectedTheme:THEMES.DARK })
}
chooseSecond = () => {
this.setState({ selectedTheme:THEMES.LIGHT })
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.