React Native TextInput在iOS的onSubmitEditing中无法获取值

你的代码在React Native for Web中符合React.js预期能正常运行，但在iOS平台上onSubmitEditing回调里始终拿不到输入值，不管是尝试event.target.value还是直接接收text参数都返回undefined，这是因为React Native原生平台的API和Web端存在差异。

问题原因 #

React Native原生（iOS/Android）的TextInput组件，其onSubmitEditing回调的参数并非Web端的DOM事件对象，而是一个包含nativeEvent属性的对象，输入内容实际存储在event.nativeEvent.text中。而React Native for Web会将TextInput映射为浏览器的<input>元素，所以沿用Web端的写法能生效，但原生平台不兼容这种写法。

解决方案 #

有两种可行的解决方式：

1. 从nativeEvent中获取输入值
   修改onSubmitted函数，直接读取nativeEvent.text：

const onSubmitted = (event) => {
    console.log(event.nativeEvent.text); // 正确获取输入值
}

2. 直接使用已维护的state变量
   因为你已经通过onChangeText将输入值同步到了input状态中，也可以直接在回调里使用这个state：

const onSubmitted = () => {
    console.log(input); // 直接使用state中存储的值
}

这两种方式都能在iOS平台正常获取到输入内容，同时也兼容React Native for Web场景。

内容的提问来源于stack exchange，提问作者Flak DiNenno