Question

我正在一个React Native项目上，用户需要输入他的基本详细信息以继续进入应用程序，因此作为验证的一部分，我想禁用可触摸的突出显示，直到用户填写所有表单详细信息（此处以我为例，我正在使用React Native Picker使用户感到舒适来填写表格）如何禁用touchablehighlight直到用户选择了所有Picker值？有人可以帮我吗？以下是我的项目的示例代码。

<View>
  <Picker
    selectedValue={this.state.bloodgrp}
    style={{ height: 50, width: 170, color: 'black' }}
    baseColor="#FFF" //for initial text color
    onValueChange={(itemValue) => this.setState({bloodgrp: itemValue})}>
    <Picker.Item label="Select" value='Select' />
    <Picker.Item label="A+" value='A+' />
    <Picker.Item label="A-" value='A-' />
    <Picker.Item label="B+" value='B+' />
    <Picker.Item label="B-" value='B-' />
    <Picker.Item label="O+" value='O+' />
    <Picker.Item label="O-" value='O-' />
    <Picker.Item label="AB+" value='AB+' />
    <Picker.Item label="AB-" value='AB-' />
</Picker>
</View>

<View style={styles.inputContainer}>
  <Text style={styles.textLabel}>Gender :</Text>
  <Picker
    selectedValue={this.state.gender}
    style={{ height: 50, width: 170, color: 'black' }}
    baseColor="#FFF" //for initial text color
    onValueChange={(itemValue) => this.setState({gender: itemValue})}>
    <Picker.Item label="Select" value=''/>
    <Picker.Item label="Male" value='Male' />
    <Picker.Item label="Female" value='Female' />
  </Picker>
</View>

<View style={styles.inputContainer}>
  <Text style={styles.textLabel}>Height :</Text>
  <View style={{flexDirection:'row'}}>
    <Picker
      selectedValue={this.state.height}
      style={{ height: 50, width: 150, color: 'black'}}
      baseColor="#FFF" //for initial text color
      onValueChange={(itemValue) => this.setState({height: itemValue})}>
      <Picker.Item label="Select"  value='' />
      <Picker.Item label="121.92" value='121.92' />
      <Picker.Item label="124.46" value='124.46' />
      <Picker.Item label="127.00" value='127.00' />
    </Picker>
    <TouchableHighlight
      underlayColor={ 'rgb(32, 53, 70)'}
      activeOpacity={0.9}>
      <View style={styles.button}>
        <Text style={styles.buttonText}>Get your BMI</Text>
      </View>
    </TouchableHighlight>
  </View>
</View>

预先感谢

Answer 1

constructor(props) {
    super(props);
    this.state = {
        disabledBtn: true
    };
}

render() {
    return(
        <TouchableOpacity disabled={this.state.disabledBtn}>
            <Text>Click</Text>
        </TouchableOpacity>
    )
}

**现在，您可以更改disabledBtn状态以在任何操作或事件上启用它让我知道是否仍然面临问题**

Answer 2

constructor(props) {
    super(props);
    this.state = {
        bloodgrp: undefined,
        height: undefined,
        gender: undefined,
    }
}


<TouchableHighlight 
    disabled ={!(this.state.bloodgrp && this.state.height && this.state.gender)}
</TouchableHighlight >

禁用TouchableHighlight，直到我提交表单

2 个答案: