反应物化复选框答案

【问题标题】：React Materialize checkbox反应物化复选框
【发布时间】：2017-06-11 16:02:20
【问题描述】：

免责声明：开发新手，这是我的第一篇 s/o 帖子。

我在一个带有复选框的过滤器上使用物化。我目前的复选框组件返回为：

return (
    <div className={this.props.type} >
      <form>
        <input
              type={this.props.type}
              value={label}
              checked={isChecked}
              onChange={(e) => this.toggleCheckboxChange(e)}
            />
        <label>
          <input
            type={this.props.type}
            value={label}
            checked={isChecked}
            onChange={(e) => this.toggleCheckboxChange(e)}
          />
         {label}
        </label>
      </form>
    </div>
)

它与复选框及其旁边的标签一起呈现。但是，如果我像这样删除标签标签之外的输入标签：

return (
    <div className={this.props.type} >
      <form>
        <label>
          <input
            type={this.props.type}
            value={label}
            checked={isChecked}
            onChange={(e) => this.toggleCheckboxChange(e)}
          />
         {label}
        </label>
      </form>
    </div>
)

复选框消失，但文本仍可点击。该组件是基于类的，因此它保持其被选中或未选中的状态。

关于它为什么会这样表现的任何想法？

【问题讨论】：

问题已解决！事实证明，我需要输入字段上的 ID 以及标签中的 htmlFor 才能使其正常工作。

标签： reactjs checkbox materialize

【解决方案1】：

问题已解决！结果我的输入字段上需要一个匹配的 ID，并且我的标签字段上需要 htmlFor 属性。请参阅下面的修复代码：

<div className={this.props.type} >
      <form>
        <input
            id={label[0]}
            type={this.props.type}
            value={label}
            checked={isChecked}
            onChange={(e) => this.toggleCheckboxChange(e)}
            />
        <label htmlFor={label[0]}>
         {label}
        </label>
      </form>
    </div>

【讨论】：