React中复制多个SwitchButton后仅首个可点击修改状态问题求助

根因 #

问题根源是SwitchButton组件内部硬编码了固定的input id，同时用<label>的for属性绑定了这个固定id。浏览器规范中id是全局唯一标识，当多个组件复用同一个id时，所有label的点击事件只会触发页面中第一个匹配该id的输入框，所以只有第一个按钮能正常切换状态。

修复步骤 #

1. 改造SwitchButton组件，新增id参数作为Props，替换组件内部写死的input id、以及label的for属性值，示例组件改造逻辑：

// SwitchButton组件改造示意
const SwitchButton = ({ id, onChange, title }) => {
  return (
    <div>
      <input type="checkbox" id={id} onChange={onChange} />
      <label htmlFor={id}>{title}</label>
    </div>
  )
}

2. 调用每个SwitchButton时传入唯一的id值即可：

class App extends Component {
  handleSwitch = e => console.log(e.target.checked);

  render() {
    return (
      <div>
        <div>
          <p className="title">source</p>
          <label className="label">Button</label>
          <SwitchButton
            onChange={this.handleSwitch}
            title="SwitchButton"
            data-name="vd"
            id="switch-vd"
          />
        </div>
        <div>
          <label className="label">Button2</label>
          <SwitchButton
            onChange={this.handleSwitch}
            title="SwitchButton2"
            data-name="vd1"
            id="switch-vd1"
          />
        </div>
        {/* 后续新增的按钮只要传入不同id即可正常使用 */}
      </div>
    );
  }
}

如果不方便改造SwitchButton组件，也可以直接给每个组件外层套独立的<form>标签隔离作用域，不过更推荐上述改id的方案，符合前端规范。

内容的提问来源于stack exchange，提问作者Muhammad Ali