CODEWITHSUNDEEP
javascriptreactjsreact-native
Ralph David Abernathy
Ralph David Abernathy

Reputation: 5518

How to get value from React Native input field?

I have a login form component with the following state:

  constructor(props) {
    super(props);

    this.state = { email: '', password: '', error: '' };

    this.handleOnPress = this.handleOnPress.bind(this);
  }

handleOnPress simply logs this.state.email, like so:

  handleOnPress() {
    const { email, password } = this.state;

    console.log(email);
  }

I have a custom Input component:

  <Input
    value={this.state.email}
    placeholder="[email protected]"
    onChange={email => this.setState({ email })}
    label="Email"
  />

Defined like so:

  <TextInput
    style={styles.input}
    value={value}
    onChange={onChange}
    placeholder={placeholder}
    autoCorrect={autoCorrect}
    secureTextEntry={secureTextEntry}
  />

So when tap the button, this is what is logged in the console:

Proxy {dispatchConfig: {…}, _targetInst: FiberNode, isDefaultPrevented: ƒ, isPropagationStopped: ƒ, _dispatchListeners: null, …}

Shouldn't the value of the input field be logged, instead of the above object? What am I doing wrong?

Upvotes: 0

Views: 649

Answers (2)

nishant
nishant

Reputation: 2606

you need to do this 

onChange={event => this.setState({ email:event.target.value })}

Upvotes: 1

Ralph David Abernathy
Ralph David Abernathy

Reputation: 5518

Looks like I was using the wrong prop. Should have been onChangeText instead of onChange, as onChangeText accepts an argument to the callback.

Upvotes: 1

Related Questions