根据复选框反应本机设置值

时间:2018-08-31 02:04:03

标签: javascript reactjs react-native

我想根据复选框的选择将状态值设置为状态,例如如果“筛选和诊断”复选框为true,则将筛选状态设置为“ ScreeningAndDiagnosis”字符串值。

我如何实现这样的目标?

我陷入了这种代码水平

    <View style={{ flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: 'rgba(0, 0, 0, .3)', padding: 15}}>
      <CheckBox onValueChange={ (value) => this.setState({ screening.checked : !this.state.screening.checked }) } value={ this.state.screening.checked } />
      <Text style={{ marginTop: 5, fontSize : 16, fontWeight: '500'}}> Screening And Diagnosis </Text>
    </View>

我有这样的状态

this.state = {
  screening : { checked : false, value : '' },
}

1 个答案:

答案 0 :(得分:0)

为此,我使用的是基于本机的复选框,请注意,复选框的值只能在状态中维护,而不能在组件中维护,因此您必须将组件与状态绑定,并根据以下内容更改检查的属性状态。这意味着您在状态中具有该值,并且复选框UI用于向您显示该状态为

    export default class CheckBox extends Component{
      constructor(){
        super();
        this.state={
          checked:false;
        }
      }
      render(){
        return(
          <View style={{ flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: 'rgba(0, 0, 0, .3)', padding: 15}}>
            <CheckBox checked={this.state.checked} onPress={()=>this.setState({checked:!this.state.checked})}/>
            <Text style={{ marginTop: 5, fontSize : 16, fontWeight: '500'}}> Screening And Diagnosis </Text>
          </View>
        )
      }
    }