在反應中編輯文字onClick

Question

我在編輯輸入的文字onClick事件。 enableEdit函數執行任務。如果我雙擊輸入的文本，我想觸發該功能。我的代碼是這樣的：

class App extends React.Component { 
 

 
    
 

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

 
    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} /> 
 
      <div key={todo.id} className="item"> 
 
       {todo.Value} 
 
       <div className="Button"> 
 
       <span className="destroy" onClick={this.remove.bind(this, i)}>X</span> 
 
       </div> 
 
      </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 =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}) 
 
    }; 
 

 
enableEdit(i){ 
 
    var todo= this.state.todo; 
 
    var editodo=todo[i]; 
 
    
 
    this.setState({ 
 
    todo: this.state.todo.editing=true 
 
    }); 
 
}; 
 

 
     render() { 
 
     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">x</span> 
 
       </div> 
 
       <div className="mainapp"> 
 
       <ul> 
 
       {this.state.todo.map(this.todo.bind(this))} 
 
       </ul> 
 
       </div> 
 
      </div> 
 
     ); 
 
     } 
 
    } 
 
     
 

 
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>

我嘗試了一些方法，但我得到的錯誤是this.state.todo.map不是一個函數

Answer 1

我覺得這部分是罪魁禍首：

enableEdit(i){ 
    var todo= this.state.todo; 
    this.setState({ 
    todo: this.state.todo.editing=true 
    }); 
}; 

似乎我喜歡它的設置todo是真實的，因爲它不是一個arr ay沒有可用的地圖功能。