将输入字段保持为受控组件

Question

我有一个组件的状态对象是这样初始化的：

this.state = {
    item: {}
}

item 是将从数据库中填充的对象（通过 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

对我做错了什么有什么想法吗？

谢谢！

Answer 1

这与input字段从非受控组件到受控组件时有关。当您不提供任何输入字段时，它默认为不受控制的组件。

要将组件控制在可控范围内，请使用简单的 hack

<input type="text" value={this.state.item.name? this.state.item.name : ""} />

keep an input field a controlled component