Question

我正在学习反应js，我正在尝试做一个TODO应用程序，但我无法解决这个问题，onchange功能无法正常工作，浏览器显示没有错误。

class ToDoList extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
      tasks: [
          {'task':"send resume to ramesh hr",'isChecked':'false'},
      ]
    }
//this.onChange = this.onChange.bind(this);
   }

    handleCheckBox(e){
      console.log("dada");
    }
    onChange(e) {
       //Your change code here!!
    }

  render() {
    return (
        <ul className="task-list">
          {
            this.state.tasks.map(function(el, i) {  
              return (<li key={i}>
                      <div className="content">
                          <div className="tick">
                            <input type="checkbox" checked={el.isChecked}  onChange={this.onChange.bind(this)}/>
                          </div>
                      </div>
                    </li>)
            })  
          }
        </ul>
  );
  }
}

Answer 1

<强>更改：

*您正在使用map的回调方法，因此您还需要维护上下文以在地图正文中使用this关键字，使用.bind(this)使用回调方法或避免这种错误使用箭头函数它将完成这项工作，你不必担心维护上下文。

*您正在使用对象数组，因此请使用this来遵循我们不应直接在状态变量中进行任何更改的规则。

*您需要在onchange方法中传递checkbox的索引以切换该复选框的状态。

检查工作代码：

class ToDoList extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
      tasks: [
          {'task':"send resume to ramesh hr",'isChecked':'false'},
      ]
    }
//this.onChange = this.onChange.bind(this);
   }

    handleCheckBox(e){
      console.log("dada");
    }
    onChange(i, e) {
       let tasks = JSON.parse(JSON.stringify(this.state.tasks));
       tasks[i].isChecked = e.target.checked;
       this.setState({tasks});
       console.log('clicked');
    }

  render() {
    return (
        <ul className="task-list">
          {
            this.state.tasks.map((el, i) => {  
              return (<li key={i}>
                      <div className="content">
                          <div className="tick">
                            <input type="checkbox" checked={el.isChecked}  onChange={this.onChange.bind(this, i)}/>
                            {el.task}
                          </div>
                      </div>
                    </li>)
            })  
          }
        </ul>
  );
  }
}

ReactDOM.render(<ToDoList/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='app'/>

注意：不要使用JSON.parse(JSON.stringify(this.state.tasks))，我只是用它来告诉你，你不应该直接对状态变量进行任何更改。您需要使用Immutability Helpers或其他更有效的方式来执行相同的任务。

React onchange功能不起作用

1 个答案: