复选框不起作用

Question

在将其标记为重复之前，我已经搜索过，但似乎没有答案对我有用。

更改，单击并选中它后，我的复选框不起作用。

这是我的组成部分

class Checkbox extends React.Component{
  constructor(props) {
    super(props);
    this.state = {checked: false}
    this.handleCheck = this.handleCheck.bind(this);
  }
  this.handleCheck(e) {
    e.preventDefault();
    this.setState({
      checked: e.target.checked
    })
  }
  render() {
    return (
      <input type="checkbox" checked={this.state.checked} onChange={this.handleChecked}
    );
  }
}

有什么原因不起作用？

Answer 1

import React from 'react';
import { render } from 'react-dom';

class Checkbox extends React.Component {
  constructor(props) {
    super(props);
    this.state = { checked: false }
    this.handleCheck = this.handleCheck.bind(this);
  }

  handleCheck(e){
   this.setState({
    checked: e.target.checked
   })
 }
render(){
  return (
    <div>
      <input
        id ="checkbox_id"
        type="checkbox"
        checked={this.state.checked}
        onChange={this.handleCheck}
      />
      <label htmlFor="checkbox_id"></label>
    </div>
   );
}
}

render(<Checkbox />, document.getElementById('root'));

工作演示

问题

• 方法应初始化handleCheck(e)为非this.handleCheck(e)
• 不应该有 e.preventDefault()
• onChange={this.handleCheck}
• 在使用materializecss时，需要为此ID 添加一个idin input和一个标签。