按钮 - 启用和禁用

Question

我使用React Native制作了一个表单，但我希望在TextInput为空时禁用记录按钮，并且当填入所有TextInput时，该按钮将返回启用状态。

我该怎么做？你能寄给我一些例子吗？

Answer 1

您可以这样做：

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = { name: '', email: '' };
  }

  render() {
    const { name, email } = this.state;

    return (
      <View>
        <TextInput
          onChangeText={name => this.setState({ name })}
          value={name}
        />
        <TextInput
          onChangeText={email => this.setState({ email })}
          value={email}
        />
        <TouchableHighlight disabled={!name || !email}>
          Submit
        </TouchableHighlight>
      </View>
    );
  }
}

基本上，您将TextInput s的每个值存储在状态中，并切换disabled的{​​{1}}道具（也适用于Touchable*）组件值已填充。 在这里，您还可以进行一些基本的验证，如长度或匹配模式。