ReactJS - 复选框的onChange事件未触发

Question

我将尝试在React中实现一个复选框字段集，该字段集将从以下对象呈现：

constructor() {

    this.state.todo = {
        eat: true,
        sleep: false,
        react: true
    }

    this.toggleCheckbox = this.toggleCheckbox.bind(this);
}

toggleCheckbox(e){

    console.log(e); // nothing :-/
}

render() {

    return (
    <div>
    { Object.keys(this.state.todo).map((val, i) => (          
        <div key={i} >
            <input 
                type="checkbox" 
                value={val} 
                onChange={this.toggleCheckbox} 
                checked={this.state.todo[val]} 
                /><label>{val}</label>
        </div>
     ))}
     </div>
    )
}

所有内容都正确显示，但我无法更改任何复选框。控制台记录toggleCheck()事件未被触发。

我尝试使用onClick和onChange，但没有效果。

- yevg

---

实际上问题在CSS而不是JS。这些复选框是使用<label>进行自定义样式化的，而标签的隐藏/放置阻碍了事件。再次对误报表示歉意。 - yevg

Answer 1

你正在从 this.state.tables 获取密钥，但你的状态被称为 this.state.todo。

你可以使用每个值作为 name，并通过该值切换相关的 todo 状态属性。 示例

class App extends React.Component {
  state = {
    todo: {
      eat: true,
      sleep: false,
      react: true
    }
  };

  toggleCheckbox = e => {
    const { name } = e.target;
    this.setState(prevState => ({
      todo: {
        ...prevState.todo,
        [name]: !prevState.todo[name]
      }
    }));
  };

  render() {
    return (
      <div>
        {Object.keys(this.state.todo).map((val, i) => (
          <div key={i}>
            <input
              type="checkbox"
              name={val}
              onChange={this.toggleCheckbox}
              checked={this.state.todo[val]}
            />
            <label>{val}</label>
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<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="root"></div>

- Tholle

---

我正想问关于 this.state.tables 的事情，因为我正在尝试它。 - dance2die

抱歉，那是一个打字错误。在我的实际代码中应该是 this.state.tables，todo 只是为了举例而已，但我忘记修改那一行了。 - yevg

@yevg 哦，我明白了。 没关系。 你能否在例如CodeSandbox中创建一个Minimal, Complete, and Verifiable example，或者这个答案可能已经对你有用了？ - Tholle