javascript - React 复选框未将其状态设置为选中标签单击

Question

我有一个问题，我的自定义复选框不起作用，我对 React 不是很熟悉，也找不到更好的学习点。你能检查我的代码并告诉我我做错了什么吗？

    import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';

class Checkbox extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      checked: false
    };
    this.handleChange = this.handleChange.bind(this);
    this.checkbox = React.createRef();
    this.handleClick = () => {
      this.checkbox.current.click();
    };
  }

  componentDidMount() {
    this.setState({'checked' : this.props.checked});
  }

  handleChange() {
    this.setState({'checked' : !this.state.checked});
  }

  render() {
    let {
      className,
      label,
      ...attributes
    } = this.props;

    const classes = classNames(
      'checkbox',
      className,
    );

    return (
      <div className={classes}>
        <input id="checkbox_1" type="checkbox" checked={this.state.checked} onChange={this.handleChange} {...attributes} ref={this.checkbox} />
        <label for="checkbox_1" className="checkbox-label" onClick={this.handleClick}>{label}</label>
      </div>
    );
  }
}

Checkbox.defaultProps = {
  checked: false,
  className: '',
  label: null
};

Checkbox.propTypes = {
  checked: PropTypes.bool,
  className: PropTypes.string,
  onClick: PropTypes.func,
  label: PropTypes.string
};

export default Checkbox;

问题是这个组件没有被选中，但是如果我将状态设置为 true 它不会取消选中，如果我将控制台日志安装到 handleChange 或 handleClick，我会在单击时得到 console.logged，但仅限于第一次点击，我不确定这是什么意思。在这里的另一篇文章中，我指出点击我选中和取消选中可能会出现问题，所以我创建了一个无限循环，但在那种情况下，我认为我应该有一个 console.logs 的无限循环。如果我的代码完全错误，请随意编辑它，但如果它不是很忙，请尝试为我更改的部分发表评论，以便我更好地理解发生了什么:D

提前致谢。

Answer 1

欢迎使用 stackoverflow :)

我觉得你的问题出在

handleChange() {
  this.setState({'checked' : this.state.checked});
}

您并没有改变状态，只是想用相同的值再次设置它。将其更改为:

handleChange() {
  this.setState({'checked' : !this.state.checked});
}

编辑:

所以关于输入没有从选中变为未选中的真正问题是将 {...attributes} 移交给输入。这似乎与干扰输入元素的默认选中值的“选中”属性有关。

此外，在使用 React 时，您应该使用 htmlFor 属性而不是 for。