Редактирование введенного текста с двойным щелчком, используя реакцию

Question

Я сделал приложение Todo, используя реакцию. При нажатии на ввод todo добавляется в массив, затем при нажатии на введенное todo todo получает стянутый. Теперь я столкнулся с проблемой редактирования введенного todo. Я хочу, когда я дважды щелкнул введенный todo, он преобразуется в режим редактирования, а затем я могу отредактировать todo n сохранить его при вводе нажатия клавиши. Мой код выглядит следующим образом:

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, editing: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} 
 
      <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}) 
 
    }; 
 
    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">^</span> 
 
      </div> 
 
      <div className="mainapp"> 
 
      <ul className="decor"> 
 
       {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>

Answer 1

Я пытался что-то подобное, так this gist может помочь вам на правильном пути. Я думаю, вас особенно интересует метод handleClick. Он debounces получил события кликов. Затем вы можете прослушивать определенное количество последовательных кликов, как я сделал на line 33.

Однако переход между режимами просмотра и редактирования, кажется, довольно медленно (может быть, я сделал что-то не так:. Пожимают плечами :) , поэтому если редактирование должно происходить часто, это может быть лучше фальсифицировать поведение с помощью CSS *

• Стиль тип входного сигнала, чтобы выглядеть как обычный текст, то onFocus, стиль его как поле.