How to get value from React Native input field?

Question

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?

Ralph David Abernathy · Accepted Answer · 2018-06-18 18:44:54Z

1

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

answered Jun 18, 2018 at 18:44

Ralph David Abernathy

5,55813 gold badges56 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nishant · Accepted Answer · 2018-06-18 18:45:06Z

1

you need to do this

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

answered Jun 18, 2018 at 18:45

nishant

2,6161 gold badge16 silver badges20 bronze badges

1 Comment

Ralph David Abernathy Over a year ago

Thanks, but I prefer using onChangeText, slightly less code to write :)

Collectives™ on Stack Overflow

How to get value from React Native input field?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related