css切换无法在react.js中正常工作

Question

Here in my app the function 'todoCompleted' is invoked when list item or checkbox is clicked. When i click the checkbox the code is not running correctly, the style is applied only once, I'm not able to toggle it. Used : "todo.checked===true? 'line':'newtodo'" in li element.

  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

you are setting the state to true whenever it get click, so i replaced that to conditional value.

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

ie if set to true, then change it to false, otherwise make it 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>