学习笔记——Antd框架Input组件复用问题

在使用antd中的Input组件时,点击修改后,再点击新增,input组件的默认值不变。找了很久,才知道这是用于input组件的复用导致的。


1.问题

学习笔记——Antd框架Input组件复用问题

学习笔记——Antd框架Input组件复用问题 

当然,如果你将input中的值保存在函数组件的useState或者类组件的state中,应该不会出现这些问题。不过那样每次输入时会频繁render。不太推荐这样做。

我们只需要用一个变量暂时保存一下就可以。

2.解决

给input标签加上key值,渲染时区分是不同的input组件就可以了。

<Input placeholder="请输入角色名称" disabled={ false }
onChange={ (e) => { edit.inputName = e.target.value } } 
className="input-size" defaultValue={ edit.inputName } 
key={ edit.isAdd ? "addKey" : "updateKey" }></Input>

上一篇:【React + Antd】


下一篇:前端遇到的业务实现