Question

我正在尝试为复选框创建一个可重用的React组件。

现在，我知道复选框的标准图像替换是什么样的，所以这里是我的React项目：

import React, { Component } from 'react';

class Checkbox extends Component {
  render() {
    return (
      <div className="checkbox">
        <input type="checkbox" name="thing" value="valuable" id="thing"/><label for="thing"></label> {this.props.text}
      </div>
    );
  }
}

export default Checkbox;

这是一般的CSS：

input[type=checkbox] {
  display:none;
}

input[type=checkbox] + label {
  background: url("checked.png") no-repeat;
  background-size: 100%;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 0;
}
input[type=checkbox]:checked + label {
  background: url("unchecked.png") no-repeat;
  background-size: 100%;
  height: 20px;
  width: 20px;
  display: inline-block;
  padding: 0;
}

现在，因为这是React，我希望能够重用此组件。但是，我无法重复使用ID。如何使用图像替换原生复选框来创建复选框？没有这种“标签”方法，有没有办法做到这一点？ 我宁愿不使用随机数作为ID，也不要使用这些行。

Answer 1

在实例化时将id作为prop传递给组件。

authenticationManagerBean()

组件中的

（注意JSX中的<Checkbox id="whatever" value={state.valueOrWhatever} text="Change The Value!" />是for）：

htmlFor

Answer 2

我执行此操作的方法通常是执行以下操作：

<div className="checkbox">
   <label><input type="checkbox" value="valuable" /> <span>{this.props.text}</span></label>
</div>

具有无ID的图像的可重复使用的React复选框组件

2 个答案: