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

Question

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

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

您使用道具的值并更改本地状态的值。这就是为什么输入值不会改变

试试这个：

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

Answer 2

变化<input value={this.props.item} type="text" onChange={this.onTextChanged}/>到

<input value={this.state.text} type="text" onChange={this.onTextChanged}/>

当你正在建设一个控制组件，您应该向其提供其当前文本值。请参阅Controlled component in the docs