使用react

Question

我用反应制作了Todo app。在点击输入时，todo被添加到数组中，然后点击输入todo todo被吓坏了。现在我面临编辑输入的待办事项的问题。我希望当我双击输入的待办事项时，它会转换为编辑模式然后我可以编辑待办事项n将其保存在输入按键上。我的代码是这样的：

＆＃13;

＆＃13;

    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'));

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

我一直在尝试类似的事情，因此this gist可能会帮助您走上正轨。我认为您对handleClick方法特别感兴趣。 去抖收到点击事件。然后，您可以听取一定数量的连续点击，就像我在line 33上所做的那样。

然而，视图和编辑之间的转换似乎很慢（也许我做错了什么：耸肩:) ，所以如果编辑应该经常发生，假装可能会更好这种行为与css。*

• 将输入类型设置为看起来像普通文本，然后onFocus，将其设置为字段样式。

Answer 2

此时，单击事件有一个选项称为onDoubleClick = {this.handler}。