Question

给出这个初始状态：

this.state = {
    person: { id: 1, name: "Liero" }
};

当我绑定这样的输入时：<input value={this.state.person.name} />

然后我将输入设为不可编辑。我知道它会使状态和DOM元素不同步。

<小时/> 但是，当我使用defaultValue时：<input defaultValue={this.state.person.name} />，

我放弃了从代码中更改此人姓名的可能性（例如，当我想重置表单时）。

<小时/> 当我手动同步状态和输入值时：

<input value={this.state.person.name} 
       onChange={(evt) =>  this.state.person.name = evt.target.value }/>

在我调用setState或强制刷新之前它不起作用？

每当输入值发生变化时，我是否真的需要强制渲染整个组件，当我想要从代码中控制person.name时是否可以？

Answer 1

而不是直接设置this.state.person.name。致电this.setState。

这将触发另一个渲染周期，然后将this.state.person.name绑定到value：

    <input value={this.state.person.name} 
           onChange={(evt) => {
               this.state.person.name = env.target.value;
               this.setState({person:this.state.person});
           }}/>

Answer 2

你的意思是setState（）而不是改变状态吗？像这样：

class MyComponent extends Component {

  state = { person: { id: 1, name: "Liero" } }

  updateName = (e) => {
    this.setState({
      person: {...this.state.person, name: e.target.value}
    })
  }

  render (){
    return (
      <input type="text" onChange={this.updateName} value={this.state.person.name} />
    );
  }
}

React：为什么绑定值使输入只读？

2 个答案: