調用數組值到輸入字段

Question

在我的應用程序中點擊編輯按鈕時，輸入欄會顯示保存按鈕。基本上它是一個todo應用程序。我想要做的是編輯輸入的值。當我點擊編輯按鈕時，相應待辦事項的值應該存儲在我想編輯的輸入字段中。我在存儲相應的值時遇到問題。我的代碼是這樣的：

class App extends React.Component { 
 

 
    
 

 
constructor(){ 
 
    super(); 
 
    this.state={ 
 
    todo:[], 
 
    editing:false 
 
    }; 
 
}; 
 

 
entertodo(keypress){ 
 
    var Todo=this.refs.inputodo.value; 
 
    if(keypress.charCode == 13) 
 

 
    { 
 
    this.setState({ 
 
     todo: this.state.todo.concat({Value:Todo, checked:false}) 
 
    }); 
 
    this.refs.inputodo.value=null; 
 
    }; 
 
}; 
 
todo(todo,i){ 
 
    return (
 
    <li className={todo.checked===true? 'line':'newtodo'}> 
 
     <div onClick={this.todoCompleted.bind(this, i)}> 
 
     <input type="checkbox" className="option-input checkbox" checked={todo.checked} /> 
 
     <button onClick={this.edit.bind(this,i)}>edit</button> 
 
     <div key={todo.id} className="item"> 
 
      {todo.Value} 
 
      <span className="destroy" onClick={this.remove.bind(this, i)}>X</span> 
 

 
     </div> 
 
     </div> 
 
    </li> 
 
); 
 
}; 
 

 
remove(i){ 
 
    this.state.todo.splice(i,1) 
 
    this.setState({todo:this.state.todo}) 
 
}; 
 
todoCompleted(i){ 
 
    var todo=this.state.todo; 
 
    todo[i].checked =todo[i].checked? false:true; 
 
    this.setState({ 
 
     todo:this.state.todo 
 
    }); 
 

 
}; 
 
allCompleted=()=>{ 
 
    var todo = this.state.todo; 
 
    var _this = this 
 
    todo.forEach(function(item) { 
 
    item.className = _this.state.finished ? "newtodo" : "line" 
 
    item.checked = !_this.state.finished 
 
    }) 
 
    this.setState({todo: todo, finished: !this.state.finished}) 
 
}; 
 
edit(i){ 
 
    var todo= this.state.todo 
 
    this.setState({ 
 
    editing:true 
 
    }); 
 
}; 
 
save(i){ 
 
    this.setState({ 
 
    editing:false 
 
    }); 
 
}; 
 
    rendernormal() { 
 
    return (
 
     <div> 
 
     <h1 id='heading'>todos</h1> 
 
     <div className="lines"></div> 
 
     <div> 
 
      <input type="text" ref= "inputodo" onKeyPress={this.entertodo.bind(this)}className="inputodo"placeholder='todos'/> 
 
      <span onClick={this.allCompleted}id="all">^</span> 
 

 
     </div> 
 
     <div className="mainapp"> 
 
      <ul className="decor"> 
 
      {this.state.todo.map(this.todo.bind(this))} 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    ); 
 
    }; 
 
    renderform(todo,i) { 
 
    return (
 
    <div> 
 
     <h1 id='heading'>todos</h1> 
 
     <div className="lines"></div> 
 
     <div> 
 
     <input type="text" ref= "inputodo" value={this.props.todo} placeholder='EDIT TODO'/> 
 
     <span onClick={this.allCompleted}id="all">^</span> 
 
     <button onClick={this.save.bind(this)}>save</button> 
 
     </div> 
 
     <div className="mainapp"> 
 
     <ul className="decor"> 
 
      {this.state.todo.map(this.todo.bind(this))} 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    ); 
 
    }; 
 
    render(){ 
 
    if (this.state.editing) { 
 
     return this.renderform() 
 
    } 
 
    else { 
 
    return this.rendernormal() 
 
    } 
 
    }; 
 
} 
 
    
 

 
ReactDOM.render(<App/>,document.getElementById('app'));

.line { 
 
    text-decoration: line-through; 
 
    color: red; 
 
} 
 
.newtodo{ 
 
    text-decoration: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> 
 
<div id="app"></div>

Answer 1

可以存儲在組件的狀態「當前值」，並把它傳遞形成的輸入。切換編輯模式時，只需更新狀態值。嘗試：

注：

我已經使用了「哈克」的方式從不變性的狀態克隆OBJETS的陣列。你最好使用更高級的工具，如this。

class App extends React.Component { 
 

 
    
 

 
constructor(){ 
 
    super(); 
 
    this.state={ 
 
    todo:[], 
 
    editing:false, 
 
    value: '', 
 
    current: null, 
 
    }; 
 
}; 
 

 
entertodo(keypress){ 
 
    var Todo=this.refs.inputodo.value; 
 
    if(keypress.charCode == 13) 
 

 
    { 
 
    this.setState({ 
 
     todo: this.state.todo.concat({Value:Todo, checked:false}) 
 
    }); 
 
    this.refs.inputodo.value=null; 
 
    }; 
 
}; 
 
todo(todo,i){ 
 
    return (
 
    <li className={todo.checked===true? 'line':'newtodo'}> 
 
     <div onClick={this.todoCompleted.bind(this, i)}> 
 
     <input type="checkbox" className="option-input checkbox" checked={todo.checked} /> 
 
     <button onClick={this.edit.bind(this,i)}>edit</button> 
 
     <div key={todo.id} className="item"> 
 
      {todo.Value} 
 
      <span className="destroy" onClick={this.remove.bind(this, i)}>X</span> 
 

 
     </div> 
 
     </div> 
 
    </li> 
 
); 
 
}; 
 

 
remove(i){ 
 
    this.state.todo.splice(i,1) 
 
    this.setState({todo:this.state.todo}) 
 
}; 
 
todoCompleted(i){ 
 
    var todo=this.state.todo; 
 
    todo[i].checked =todo[i].checked? false:true; 
 
    this.setState({ 
 
     todo:this.state.todo 
 
    }); 
 

 
}; 
 
allCompleted=()=>{ 
 
    var todo = this.state.todo; 
 
    var _this = this 
 
    todo.forEach(function(item) { 
 
    item.className = _this.state.finished ? "newtodo" : "line" 
 
    item.checked = !_this.state.finished 
 
    }) 
 
    this.setState({todo: todo, finished: !this.state.finished}) 
 
}; 
 
changeValue(e) { 
 
    this.setState({ 
 
    value: this.state.value = e.target.value 
 
    }); 
 
} 
 
edit(i){ 
 
    var todo= this.state.todo 
 
    this.setState({ 
 
    editing:true, 
 
    value: this.state.todo[i].Value, 
 
    current: i 
 
    }); 
 
}; 
 
save(i){ 
 
    var clonedTodo = JSON.parse(JSON.stringify(this.state.todo)); 
 
    clonedTodo[this.state.current].Value = this.state.value; 
 
    this.setState({ 
 
    editing:false, 
 
    todo: clonedTodo 
 
    }); 
 
}; 
 
    rendernormal() { 
 
    return (
 
     <div> 
 
     <h1 id='heading'>todos</h1> 
 
     <div className="lines"></div> 
 
     <div> 
 
      <input type="text" ref= "inputodo" onKeyPress={this.entertodo.bind(this)}className="inputodo"placeholder='todos'/> 
 
      <span onClick={this.allCompleted}id="all">^</span> 
 

 
     </div> 
 
     <div className="mainapp"> 
 
      <ul className="decor"> 
 
      {this.state.todo.map(this.todo.bind(this))} 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    ); 
 
    }; 
 
    renderform(todo,i) { 
 
    return (
 
    <div> 
 
     <h1 id='heading'>todos</h1> 
 
     <div className="lines"></div> 
 
     <div> 
 
     <input type="text" onChange={this.changeValue.bind(this)} ref="inputodo" value={this.state.value} placeholder='EDIT TODO'/> 
 
     <span onClick={this.allCompleted}id="all">^</span> 
 
     <button onClick={this.save.bind(this)}>save</button> 
 
     </div> 
 
     <div className="mainapp"> 
 
     <ul className="decor"> 
 
      {this.state.todo.map(this.todo.bind(this))} 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    ); 
 
    }; 
 
    render(){ 
 
    if (this.state.editing) { 
 
     return this.renderform() 
 
    } 
 
    else { 
 
    return this.rendernormal() 
 
    } 
 
    }; 
 
} 
 
    
 

 
ReactDOM.render(<App/>,document.getElementById('app'));

.line { 
 
    text-decoration: line-through; 
 
    color: red; 
 
} 
 
.newtodo{ 
 
    text-decoration: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> 
 
<div id="app"></div>