React Hooks Input框响应迟钝

Question

最近在给实验室写网页的时候，发现某个页面的input框，通过onChange绑定函数更新state后，输入值会存在一定的延迟，体验起来非常不流畅，尝试了很多方法，都不见效，自己第一次用React Hooks，很多问题都不清楚，想请教一下大家。

组件用的Ant Design，框架是React Hooks，这个页面的子组件都做了Memo处理，input输入的时候不会存在子组件re-render的情况，代码具体为：

//input输入值绑定
function handleInputChange(event) {
    setFilterInfo({ ...filterInfo, [event.target.name]: event.target.value });
}
//return
<Form.Item label="姓名" name="studentName">
    <Input
      placeholder="请输入姓名"
      value={filterInfo.studentName}
      style={{ width: "80%" }}
      onChange={handleInputChange}
      name="studentName"
    />
</Form.Item>

Answer 1

不是很清楚为什么使用了antd form 为什么还要把Input变为一个受控组件， 本身Input这个组件就是antd 基于input封装的组件, 如果你想要获取表单元素的值,使用antd form提供的内置api, form.getFieldValue('studentName')就好了。