当调用onBlur时,如何获取TextInput中的值？

Question

在React native中,我想在onBlur事件处理程序中传递TextInput的值.

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

e.target.value适用于简单的React.但是,在react-native中,e.target.value是未定义的.react-native中可用的事件args的结构是什么？

Answer 1

在React Native中,您可以从中获取TextInput的值e.nativeEvent.text.

不幸的是,这不起作用multiline={true}.解决这个问题的方法是维护一个ref TextInput并通过_lastNativeText组件的属性访问文本值.例如(假设您已为TextInput组件指定了"textInput"的ref):

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

Answer 2

您应该使用'onEndEditing'方法而不是'onBlur'

onEndEditing？:函数在文本输入结束时调用的回调.

onBlur是一个组件函数,其中onEndEditing特定于TextInput

onEndEditing

这种方法适用于多线和单线.

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

Answer 3

简单的解决方案：这样 onBlur 您所在州的电子邮件将始终具有用户更改的最后一个值。

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