基于输入的切换按钮（Native Base）

Question

我想在两个或其中一个输入为空时禁用按钮。顺便说一句，它是 Native Base 框架。

    <View style={styles.personal} key={data}>
        <Item floatingLabel>
          <Label>Your name:</Label>
          <Input />
        </Item>
        <Item floatingLabel style={{marginVertical: 20}}>
          <Label>Your age:</Label>
          <Input keyboardType="numeric"/>
        </Item>
        <Button style={{alignSelf: 'center'}} rounded disabled={false}
          onPress={() => this.refs.swiper.scrollBy(1)}>
            <Text style={{width: '70%', textAlign: 'center'}}>Next</Text>
          </Button>
      </View>

我尝试过的：

state = {
  inputName: "",
  inputAge: "",
}
<Input value={this.setState({inputName: value})}/> 
<Input value={this.setState({inputAge: value})} keyboardType="numeric"/>
<Button style={{alignSelf: 'center'}} rounded 
          disabled={this.state.inputName==="" & this.state.inputAge==="" ? true:false }
          onPress={() => this.refs.swiper.scrollBy(1)}>
            <Text style={{width: '70%', textAlign: 'center'}}>Next</Text>
        </Button>

变量值错误

Answer 1

您在条件中遗漏了额外的 &。

你的情况应该是这样的，

disabled={this.state.inputName==="" || this.state.inputAge==="" ? true:false }

因为对于逻辑与运算，只有当两个输入都为空时，结果才会为真。如果任何输入不为空，则结果将为 false 并启用该按钮。因此，您需要使用逻辑或运算，以便当任何输入为空时，条件将 return 为真。

&& 是逻辑与操作

& 是按位与

在这里找出 & and && 之间的区别。

您可以执行以下操作以将输入值保存在状态中。

<Input onChangeText={val => this.setState({ inputName: val })} value={this.state.inputName}/> 
<Input onChangeText={val => this.setState({ inputAge: val })} value={this.state.inputAge} keyboardType="numeric"/>

基于输入的切换按钮（Native Base）

Toggle button based on input (Native Base)

javascript

reactjs

react-native

native-base