javascript - React - 使用一个功能处理多个切换按钮(输入类型单选按钮)

Question

我有我的自定义图标切换组件:

class ToggleIconSwitch extends Component {

  render() {
    const { leftIcon, rightIcon, name, handleOptionChange, checked, leftValue, rightValue } = this.props

    return (
      <div className="toggle-switch-icon-wrapper">
        <div className="toggle-switch">
          <input 
            type="radio" 
            name={ name } 
            id={ leftValue } 
            value={ leftValue } 
            checked={ checked === leftValue } 
            onChange={ handleOptionChange }
          />
          <label htmlFor={ leftValue } className="icon">{ leftIcon }</label>
          <input 
            type="radio" 
            name={ name } 
            id={ rightValue } 
            value={ rightValue } 
            checked={ checked === rightValue } 
            onChange={ handleOptionChange }
          />
          <label htmlFor={ rightValue } className="icon">{ rightIcon }</label>
        </div>
      </div>
    )
  }
}

然后我在某个页面上有多个切换，我想处理每个切换输入更改...

_.map(acl, (permission) => {
  return (
    <div className="row" key={ permission.id } >
      <ToggleIconSwitch
        name={ _.toString(permission.id) }
        leftIcon={ <VisibilityIcon className="svg" /> }
        leftValue="read"
        rightIcon={ <CreateIcon className="svg"/> }
        rightValue="write"
        checked={ permission.permission }
        handleOptionChange={ this.toggleUsersPermission }
      />
      <IconButton 
        aria-label="Delete" 
        className="icon-button animate"
        onClick={ this.openDeleteDialog(permission) }
      >
        <CloseIcon className="icon-button-red" />
      </IconButton>
    </div>
  )
})

问题是，即使我单击另一个 ToggleIconSwitch，toggleUsersPermission 函数始终仅针对第一个 ToggleIconSwitch 组件调用。当我单击另一个切换组件的标签时，它也没有反应，该标签在列表中的第一个切换组件中被选中。我总是得到列表中第一个切换的 event.target ...为什么？

尝试单击 CodeSandbox here 中的图标

Answer 1

问题出在标签中，它们具有相同的 htmlFor 值，并且输入 ID 相同