javascript - 按钮 - 启用和禁用

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 的每个值存储在状态中，并切换 Touchable* 的 disabled 属性(也可以当所有值都被填充时，对于 Button) 组件。在这里您还可以进行一些基本验证，例如长度或匹配模式。