Question

我正在尝试编辑onClick事件中输入的文本。 enableEdit函数执行任务。如果我双击输入的文本，我想触发该功能。我的代码是这样的：

＆＃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})

        });
        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'));

＆＃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;

我尝试了一些方法，但我得到的错误是 this.state.todo.map不是函数

Answer 1

我认为这部分是罪魁祸首：

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

对我而言似乎是设置todo为真，因为它不是数组没有可用的地图功能。

编辑文本onClick in react

1 个答案: