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

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

---

1.问题

当然，如果你将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>

所以在使用antd表单相关的标签时，可以添加一个key属性。