Button - Enabled and Disabled

Question

Button - Enabled and Disabled

Navigation

#1 by (0 votes)

3

I made a form with React Native, however I want the Button to be disabled when the TextInput is empty (not filled in), and when everything is filled in, the Button is re-enabled.

How can I do this? Can you send me examples of how I do this?

Thanks

react-native

asked by anonymous 17.11.2016 / 03:51

1 answer

How to make pincode activator via serial? Button does not call the web service method

score 0 · 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 it.

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