在使用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>