React函数组件Input绑定onChange后读取输入值为空如何解决

输入后读取value始终为空的核心原因是你用普通const变量存储输入值的写法，在函数式组件里完全不具备状态持久化能力，和你之前熟悉的ES6类组件运行逻辑有本质区别：

• 类组件的状态绑定在组件实例this上，constructor中初始化的this.state会在组件整个生命周期内留存，更新后不会被重置
• 函数式组件每次触发重渲染都会从头执行一遍整个函数逻辑，你在函数体里直接声明的const变量，每次渲染都会被重新赋值为初始空值。哪怕onChange触发时临时修改了变量，下一次渲染执行到变量声明行就会直接把值打回初始空状态，当然读不到最新输入。

用React官方提供的useState Hook管理输入框的受控状态，替换掉原来的普通const变量定义即可：

1. 先在文件顶部引入Hook：

import { useState } from 'react'

2. 在组件函数内为两个输入框分别声明状态和更新方法，替换你原来的const变量定义：

// 示例：两个输入框分别对应业务需要的两个字段，初始值为空字符串
const [firstInputVal, setFirstInputVal] = useState('')
const [secondInputVal, setSecondInputVal] = useState('')

3. 给两个Input组件正确绑定value和onChange，做成标准受控组件：

{/* 第一个输入框 */}
<Input
  // 其他原有属性比如placeholder、type、className正常保留
  value={firstInputVal}
  onChange={(e) => setFirstInputVal(e.target.value)}
/>

{/* 第二个输入框 */}
<Input
  value={secondInputVal}
  onChange={(e) => setSecondInputVal(e.target.value)}
/>

4. 后续业务逻辑里要读取输入值时，直接取firstInputVal和secondInputVal即可，拿到的就是实时最新的输入内容。

• 不要尝试把const换成let来存输入值，哪怕let支持重新赋值，下一次组件重渲染时变量还是会被重置，根本存不住状态
• 不要只绑onChange不绑value属性，缺了value绑定的输入框不是标准受控组件，很容易出现显示值和实际状态不同步的问题
• 如果你用的是第三方UI库封装的Input组件，要先确认组件的onChange回调是否正确返回输入值/原生事件对象，部分封装组件的回调参数不是原生event，需要取回调的第一个参数直接作为输入值，不要硬写e.target.value

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