內聯編輯待辦事項列表無法更改輸入值

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