将输入字段保留为受控组件
将输入字段保留为受控组件
提问于 2018-07-25 08:26:14
我有一个组件，它有一个状态对象，初始化如下：
this.state = {
item: {}
}item是一个将从DB (通过API调用)填充的对象。然后将item.name连接到表单字段，如下所示：
<input type="text" name="name" value={this.state.item.name} />一切正常，但是当我需要重置item对象时，问题就来了。
我希望下面的resetItem()函数重置整个item状态对象，但是当我通过API填充表单之后调用它时，输入值没有改变，它保留了最后一个值，因为输入字段试图从controlled字段更改为uncontrolled。
resetItem(){
this.setState({ item: {} }); //DOESN't work, the input value is not cleared
}让它正常工作的唯一方法是逐个清理所有的对象属性。这不是我想要的。
resetItem(){
this.setState({ item: { name: '', address: '' } }); //Works, but it's not what I want
}演示：JSFiddle
知道我哪里做错了吗？
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-25 08:45:17
这与input字段从非受控组件变为受控组件有关。当您不提供任何输入字段时，它默认为非受控组件。
https://jsfiddle.net/69z2wepo/240731/
要将组件保持在可控范围内，请使用简单的hack
<input type="text" value={this.state.item.name? this.state.item.name : ""} />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51509274
复制相关文章
相似问题