Button - Enabled and disabled

Question

I made a form with React Native, but I want the Button to be disabled when the Textinput are empty (unfilled), and when all is completed, the Button is enabled again.

How can I do that? You can send me examples of how I do that?

Thank you

Answer 1

In the disabled property as you will use pure javascript, you can do a boolean check. Here’s an example of how to use.

class Form extends React.Component {
  state = {
    login:'',
    senha:''
  }

  render() {
    const { login, senha } = this.state;
    return(
      <View style={{flex:1,justifyContent:'center', alignItems:'center'}}>
        <TextInput placeholder='Login' 
          value={ login } 
          onChangeText={ text => this.setState({ login:text }) }
        />
        <TextInput placeholder='Senha' 
          value={ senha } 
          onChangeText={ text => this.setState({ senha: text }) } 
        />
        <Button 
        title='logar'
          onPress={() => { this.logar()}}
          disabled={ !(login.length && senha.length) }
        />
      </View>
    )
  }
}