按钮-启用和禁用

Question

I made a form using React Native, however I want the record button to be disabled while the TextInput are empty, and when all TextInput is filled in, the button goes back to enabled.

How do I do this? Can you send me examples?

Answer 1

You can do something like this:

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>
    );
  }
}

Basically, you store each value of the TextInput s in the state and you toggle the disabled prop of the Touchable* (also works for Button ) component when all the values are filled. And here you can also do some basic validation like length or a matching pattern.