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'));

Working Demo

<强>问题

方法应初始化为handleCheck(e)而不是this.handleCheck(e)
不应该有e.preventDefault()
onChange={this.handleCheck}
当您使用materializecss时，您需要在id中添加input以及此ID的标签。

复选框无效

1 个答案: