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

Question

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

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

关于我在做什么错的任何想法吗？

谢谢！

Answer 1

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

https://jsfiddle.net/69z2wepo/240731/

要使组件处于受控状态，请使用简单的技巧

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