Question

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

我正在使用带有复选框的过滤器对react项目进行物化。我目前将复选框组件返回为：

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

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

关于它为何如此表现的任何想法？

Answer 1

问题已解决！结果我需要在我的输入字段上匹配我的标签字段上的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>

React Materialize复选框

1 个答案: