自定义复选框不正确

Question

我正在制作自定义复选框，但出现了问题。当我选择底部复选框时，它只被选中第一个。我认为样式有问题，但我不确定。我已经在沙盒中重新创建了，请您检查一下https://codesandbox.io/s/adoring-pine-hqxwt

<label htmlFor="checkbox">
    <div className="checkbox-container">
      <input
        className="checkbox-hidden"
        id="checkbox"
        type="checkbox"
        checked={checked}
        onChange={onchange}
      />
      <div className="checkbox-styled">
        <svg
          className="checkbox-icon"
          style={{ visibility: checked ? "visible" : "hidden" }}
          viewBox="0 0 24 24"
        >
          <polyline points="20 6 9 17 4 12" />
        </svg>
      </div>
    </div>
    <span>{label}</span>
  </label>


.checkbox-icon {
  fill: none;
  stroke: #177ff0;
  stroke-width: 2px;
}

.checkbox-container {
  display: inline-block;
  vertical-align: middle;
}
.checkbox-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  // clippath: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.checkbox-styled {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: salmon;
  border-radius: 3px;
  transition: all 150ms;
  border-radius: 1px;
  border: 1px solid #dbeaf4;
  background-color: transparent;
  :hover {
    border-color: #4da1ff;
  }
}

Answer 1

您所有的复选框都具有相同的 id 和 htmlFor 值。每对 id 和 htmlFor 都需要一个唯一的值：

const Checkbox = ({ checked, onchange, label, id }) => (
  <label htmlFor={id}>
    <div className="checkbox-container">
      <input
        className="checkbox-hidden"
        id={id}
        type="checkbox"
        checked={checked}
        onChange={onchange}
      />
      <div className="checkbox-styled">
        <svg
          className="checkbox-icon"
          style={{ visibility: checked ? "visible" : "hidden" }}
          viewBox="0 0 24 24"
        >
          <polyline points="20 6 9 17 4 12" />
        </svg>
      </div>
    </div>
    <span>{label}</span>
  </label>
);

使用示例：

<Checkbox
  id={`checkbox${idx}`}
  checked={idx === this.state.isChecked}
  onchange={() => this.toggleCheckbox(idx)}
  label={item}
/>