点击响应

Question

使用react做了一个简单的待办事项应用程序。单击复选框将各个待办事项的css更改为三通，并在Hover上显示一个按钮，然后删除相应的待办事项。 在这里，我想实现两件事： 1.在＆＃39; x＆＃39;上更改鼠标点击事件中整个待办事项列表的css。使用反应。 2.单击相应的列表项时，更改单个待办事项的css。 我的应用代码是这样的。

class App extends 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, Decor:'newtodo animated fadeInLeft', checked:false})
      });
      this.refs.inputodo.value=null;
    };
  };
  todo(text,i){
    return (
      <li className={text.Decor}>
        <input type="checkbox" onChange={this.todoCompleted.bind(this,i)}className="option-input checkbox" checked={text.checked} />
        <div key={text.id}  className="item">
          {text.Value}
          <button type="button" className="destroy" onClick={this.remove.bind(this)}>X</button>
        </div>
      </li>
    );
  };

  remove(i){
    this.state.todo.splice(i,1)
    this.setState({todo:this.state.todo})
  };
  todoCompleted(i){
    var todo={...this.state.todo}
    if(todo[i].checked){
      this.state.todo[i].checked = false;
      this.state.todo[i].Decor='newtodo'
      this.setState({
        todo: this.state.todo
      });
    }
    else {
      this.state.todo[i].checked = true;
      this.state.todo[i].Decor= 'line'
      this.setState({
        todo: this.state.todo
      });
    }
  };
  **allDone(){
    this.state.todo.style= 'line'
  };**

    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.allDone}id="all">x</span>**
            </div>
          <div className="mainapp">
            <ul>
            {this.state.todo.map(this.todo.bind(this))}
            </ul>
          </div>
        </div>
      );
    }
  }
  export default App;

我创建了一个名为allDone（）的函数，并使用onClick事件将其分配给span元素＆＃39; X＆＃39;。我无法将列表中所有元素的css更改为删除。

Answer 1

您可以使用forEach（）语句添加新类或将alldone函数中的类更改为。你还需要绑定这个函数。

allDone= ()=>{
    var todo = this.state.todo;

    todo.forEach(function(item) {
      item.Decor = "newtodo animated fadeInLeft strike"
    })
    this.setState({todo: todo});
  };

＆＃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, Decor:'newtodo animated fadeInLeft', checked:false})
      });
      this.refs.inputodo.value=null;
    };
  };
  todo(text,i){
    return (
      <li className={text.Decor}>
        <input type="checkbox" onChange={this.todoCompleted.bind(this,i)}className="option-input checkbox" checked={text.checked} />
        <div key={text.id}  className="item">
          {text.Value}
          <button type="button" className="destroy" onClick={this.remove.bind(this)}>X</button>
        </div>
      </li>
    );
  };

  remove(i){
    this.state.todo.splice(i,1)
    this.setState({todo:this.state.todo})
  };
  todoCompleted(i){
    var todo={...this.state.todo}
    if(todo[i].checked){
      this.state.todo[i].checked = false;
      this.state.todo[i].Decor='newtodo'
      this.setState({
        todo: this.state.todo
      });
    }
    else {
      this.state.todo[i].checked = true;
      this.state.todo[i].Decor= 'strike'
      this.setState({
        todo: this.state.todo
      });
    }
  }; 
  allDone= ()=>{
    var todo = this.state.todo;
    
    todo.forEach(function(item) {
      item.Decor = "newtodo animated fadeInLeft strike"
    })
    this.setState({todo: todo});
  };
 
    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.allDone}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;

.strike {
  text-decoration: line-through;
}

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

这应该可以解决问题：

<强>的Javascript

allDone() {
    let new_todo = this.state.todo.map((t) => { return { Decor: 'line' } })
    this.setState({ todo: new_todo }); 
}