Javascript 内联编辑待办事项列表可以'；不改变输入值

我想我遗漏了一些东西，但不知道它是什么，我知道value={this.text}将绑定状态的值，但由于这是内联编辑，我想用它的现有值填充输入字段，而不是空白

类TodoItem扩展了React.Component{
构造函数（）{
超级（）
此.state={
文本：“”，
i编辑：错误
};
this.onClickEdit=this.onClickEdit.bind（this）；
this.onSaveEdit=this.onSaveEdit.bind（this）；
this.onTextChanged=this.onTextChanged.bind（this）；
}
onClickEdit（）{
this.setState（{isEditing:！this.state.isEditing}）；
}
onSaveEdit（）{
这是我的国家({
text:this.state.text，
i编辑：错误
});
}
onTextChanged（e）{
this.setState（{text:e.target.value}）；
}
render（）{
返回(

{this.state.isEditing？''：{this.props.item}
{this.state.isEditing？：''}
{this.state.isEditing？''：编辑}
拯救

)
}
}

现在的问题是它阻止了按键。

将

更改为

---

在构建受控构件时，应将其当前文本作为值提供给它。请参见使用道具的值并更改本地状态的值。这就是为什么输入值没有改变

试试这个：

class TodoItem extends React.Component {
  constructor(props){
    super()
    this.state = {
      text: props.item,
      isEditing: false
    };
    this.onClickEdit = this.onClickEdit.bind(this);
    this.onSaveEdit = this.onSaveEdit.bind(this);
    this.onTextChanged = this.onTextChanged.bind(this);
  }
  onClickEdit(){
    this.setState({isEditing: !this.state.isEditing});
  }
  onSaveEdit(){
    this.setState({
      isEditing: false
    });
  }
  onTextChanged(e){
    this.setState({text: e.target.value});
  }
  render(){
    return(

      <li>
      {this.state.isEditing ? '' : <span>{this.state.text}</span>}

      {this.state.isEditing ? <span><input value={this.state.text} type="text" onChange={this.onTextChanged}/></span> :''}
  &nbsp;&nbsp;
      {this.state.isEditing ? '' : <button onClick={this.onClickEdit}>Edit</button>}

      <button onClick={this.onSaveEdit}>Save</button>
      </li>
    )
  }
}

类TodoItem扩展了React.Component{
建造师（道具）{
超级（）
此.state={
文本：props.item，
i编辑：错误
};
this.onClickEdit=this.onClickEdit.bind（this）；
this.onSaveEdit=this.onSaveEdit.bind（this）；
this.onTextChanged=this.onTextChanged.bind（this）；
}
onClickEdit（）{
this.setState（{isEditing:！this.state.isEditing}）；
}
onSaveEdit（）{
这是我的国家({
i编辑：错误
});
}
onTextChanged（e）{
this.setState（{text:e.target.value}）；
}
render（）{
返回(

{this.state.isEditing？''：{this.state.text}
{this.state.isEditing？：''}
{this.state.isEditing？''：编辑}
拯救

)
}
}

pls adda jsbin/fiddle链接？我知道你做了什么改变，但你能补充解释吗？它也能帮助其他人。@Jay好的，我试试看！这将清除输入文本，我希望它保持不变。然后您应该使用componentDidMount生命周期事件执行此操作。setState（{'text'：this.props.item}）在我的jsbin链接中查看我从另一个组件传递名称，componentDidMount如何帮助抵制输入的名称？

class TodoItem extends React.Component {
  constructor(props){
    super()
    this.state = {
      text: props.item,
      isEditing: false
    };
    this.onClickEdit = this.onClickEdit.bind(this);
    this.onSaveEdit = this.onSaveEdit.bind(this);
    this.onTextChanged = this.onTextChanged.bind(this);
  }
  onClickEdit(){
    this.setState({isEditing: !this.state.isEditing});
  }
  onSaveEdit(){
    this.setState({
      isEditing: false
    });
  }
  onTextChanged(e){
    this.setState({text: e.target.value});
  }
  render(){
    return(

      <li>
      {this.state.isEditing ? '' : <span>{this.state.text}</span>}

      {this.state.isEditing ? <span><input value={this.state.text} type="text" onChange={this.onTextChanged}/></span> :''}
  &nbsp;&nbsp;
      {this.state.isEditing ? '' : <button onClick={this.onClickEdit}>Edit</button>}

      <button onClick={this.onSaveEdit}>Save</button>
      </li>
    )
  }
}