Javascript 如何在React Native中以状态存储值？

我创建了一个带有两个选项的小表单。基本上，我希望用户选择一个选项，并在“首选项”状态下传递该值（并进一步在firebase中传递该值）。我不确定我使用“if-Condition”在选项之间进行选择的方法是否正确，因为我是一名Javascript和React原生初学者

在代码方面，您将如何处理这个问题

 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
},
})

导出默认类选择选项扩展组件{
状态={
选项1：错误，
选项2：错误，
首选项：“”
}
chooseFirst=（）=>{
if（this.state.option1==false）{
this.setState（{option1:true}）
this.setState（{option2:false}）
}
}
选择秒=（）=>{
if（this.state.option2==false）{
this.setState（{option2:true}）
this.setState（{option1:false}）
}
}
render（）{
返回(
选择一个选项：
第一选择
第二种选择
);
}
}
const styles=StyleSheet.create({
容器：{
弹性：1，
},
问候：{
marginHorizontal:30，
玛金托普：307，
尺寸：30，
线高：40，
},
表格：{
玛金托普：39，
marginBottom:115，
marginHorizontal:30
},
文本关闭：{
颜色：'灰色'，
尺寸：28，
textTransform:“无”，
字母间距：2，
左：10
},
短信：{
颜色：“绿色”，
尺寸：28，
textTransform:“无”，
字母间距：2，
左：10
},
})

什么选项？让我们假设它的主题是：选项1（黑暗）和选项2（光明）

比如说它的主题选择

  const THEMES = {
    DARK: "dark",
    LIGHT: "light"
  };

  state = {
    selectedTheme : undefined,
    preference: ''
  }

  chooseFirst = () => {     
    this.setState({ selectedTheme:THEMES.DARK })    
  }

  chooseSecond = () => {
    this.setState({ selectedTheme:THEMES.LIGHT  })
  }

---

选择什么？让我们假设它的主题是：选项1（黑暗）和选项2（光明）

比如说它的主题选择

  const THEMES = {
    DARK: "dark",
    LIGHT: "light"
  };

  state = {
    selectedTheme : undefined,
    preference: ''
  }

  chooseFirst = () => {     
    this.setState({ selectedTheme:THEMES.DARK })    
  }

  chooseSecond = () => {
    this.setState({ selectedTheme:THEMES.LIGHT  })
  }

---

如果您想使用布尔来跟踪所选选项，那么我将使用一个变量，因为对于单选按钮，一次只能选择一个，所以第二个布尔是多余的。下面是一个这样做的例子：

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>
    );
  }
}

---

如果您想使用布尔来跟踪所选选项，那么我将使用一个变量，因为对于单选按钮，一次只能选择一个，所以第二个布尔是多余的。下面是一个这样做的例子：

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>
    );
  }
}

---

你能给我解释一下，你为什么这么做吗？为了学习，我必须理解。谢谢：）你能给我解释一下，你为什么这么做吗？为了学习，我必须理解。谢谢：）谢谢！这就是我所说的合理解释。：）那么，在这种情况下，您将如何将console.log此状态首选项作为所选首选项文本？谢谢！这就是我所说的合理解释。：）那么，在这种情况下，您将如何将console.log此状态首选项作为所选的首选项文本？