javascript - css toggle 在 react.js 中无法正常工作

Question

在我的应用程序中，单击列表项或复选框时会调用函数“todoCompleted”。当我单击复选框时，代码未正确运行，样式仅应用一次，我无法切换它。 在 li 元素中使用:“todo.checked===true?'line':'newtodo'”。

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

      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>

Answer 1

只要点击它，您就将状态设置为 true，因此我将其替换为条件值。

todo[i].checked =todo[i].checked?false:true;

即如果设置为 true，则将其更改为 false，否则将其设置为 true

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;
        //removed curly braces as not used and added contion to set true or false 
         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">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>