能否直接将setState作为回调传给TextInput的onChangeText

结论：不可以直接将setState传递给对应属性，你贴的示例代码本身就存在错误，就算换成onChangeText属性直接传setState也属于不推荐的坏写法，极易引发问题。 #

具体原因如下： #

• 你示例代码中绑定的是onChange事件，这个事件的回调入参是React封装的原生合成事件对象，不是输入框的文本内容，直接传setState会把整个事件对象存入state，完全拿不到预期的输入值。
• 就算你把属性换成onChangeText（这个事件的回调确实直接返回输入的字符串值），直接传setState依然有很大隐患：
  • 这种写法隐式依赖事件传参和setState入参的完全匹配，只要后续你调整state结构（比如把单字符串state改成存包含输入值、校验状态的对象）、或者组件回调传参有变动，会直接触发逻辑错误，且没有明显报错，排查成本很高。如果使用TypeScript开发，这种写法会直接报类型不匹配错误，不符合类型规范。
  • 这种写法完全没有扩展空间，只要你需要在输入时加校验、过滤格式、触发关联请求等逻辑，还是得改回包裹回调的写法。
  • 很容易出现你示例里写错事件名的低级错误，直接传setState不会有任何逻辑提示，问题不容易被发现。

推荐写法 #

哪怕不需要额外处理输入逻辑，也建议包裹一层回调明确赋值逻辑，同时作为受控组件要绑定value属性，避免输入显示异常：

const [inputValue, setInputValue] = useState('');

// 用onChangeText的标准写法
<TextInput
  value={inputValue}
  onChangeText={(text) => setInputValue(text)}
/>

// 如果用onChange事件，需要从事件对象中取文本值
<TextInput
  value={inputValue}
  onChange={(e) => setInputValue(e.nativeEvent.text)}
/>

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