javascript - 内联编辑待办事项列表无法更改输入值

Question

我想我错过了什么但不知道它是什么，我知道 value={this.text} 会绑定(bind)状态的值，但由于这是内联编辑，我想用它的现有值填充输入字段而不是空白。

http://jsbin.com/fugowebovi/1/edit

class TodoItem extends React.Component {
  constructor(){
    super()
    this.state = {
      text: '',
      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({
      text: this.state.text, 
      isEditing: false
    });
  }
  onTextChanged(e){
    this.setState({text: e.target.value});
  }
  render(){
    return(

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

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

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

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

Answer 1

您使用 props 的值并更改本地状态的值。这就是输入值没有改变的原因

试试这个:

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>
    )
  }
}