按鈕-啟用和禁用

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* （也適用於Button ）組件的disabled屬性。 在這里，您還可以進行一些基本的驗證，例如長度或匹配模式。