How do I get the value in TextInput when onBlur is called?

Question

In React native, I want to pass the value of the TextInput in the onBlur event handler.

onBlur={(e) => this.validateText(e.target.value)}

<

Answer 1

You should use the 'onEndEditing' method instead of the 'onBlur'

onEndEditing?: function Callback that is called when text input ends.

onBlur is a component function where onEndEditing is specific for TextInput

onEndEditing

This approach works for both multiline and single line.

<TextInput 
    onEndEditing={(e: any) => 
    {
        this.setState({textValue: e.nativeEvent.text})
    }
}/>

Answer 2

Simple solution: This way onBlur your state's email will always have the last value changed by the user.

           validate = () => {
            const { email } = this.state
            console.log('Validating Email Here!', email)
           }

          <TextInput
           style={styles.input}
           placeholder='E-mail'
           onChangeText={email => this.setState({email})}
           onBlur={e => this.validate()}
         />

Answer 3

<TextInput onBlur={() => alert("This is cute")} placeholder="Enter your budget" />

Answer 4

In React Native, you can get the value of the TextInput from e.nativeEvent.text.

Unfortunately, this doesn't work for multiline={true}. One hack around this is to maintain a ref to your TextInput and access the text value through the _lastNativeText property of the component. For example (assuming you've assigned your TextInput component a ref of "textInput"):

onBlur={() => console.log(this.refs.textInput._lastNativeText)}