React-使用一项功能处理多个切换按钮（输入类型单选）

Question

I've got my custom icon toggle component:

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

and then I've got multiple toggles on some page and I want to handle each toggle input change...

_.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>
  )
})

The problem is that the toggleUsersPermission function is always called only for the first ToggleIconSwitch component, even if I click on another ToggleIconSwitch . It also does not react when I click on the other toggle component's label, which is checked in first toggle component in list. I'm always getting event.target of the first toggle in list ... Why?

Try to click on the icons in CodeSandbox here

Answer 1

问题出在标签上，它们都具有相等的htmlFor值，而且输入的id是相同的