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

问题描述 投票：0回答：2

我创建了一个具有两个选项的小型表单。基本上，我希望用户选择一个选项并以“首选项”状态传递该值（并进一步在firebase中传递该值）。我不确定使用“如果条件”在选项之间进行选择的方法是否正确，因为我是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
},
})
javascript react-native
2个回答
1
投票

如果要使用布尔值来跟踪所选选项，那么我将使用一个变量，因为在单选按钮的情况下，一次只能选择一个，因此第二个布尔值是多余的。这是一个这样做的例子：

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>
    );
  }
}
0
投票

选项是什么？让我们假设其主题为：option1（深色）和option2（浅色）

让我们说说它的主题选项

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

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

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

  chooseSecond = () => {
    this.setState({ selectedTheme:THEMES.LIGHT  })
  }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.