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

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

尝试点击CodeSandbox here

中的图标

Answer 1

问题出在标签上，它们都具有相等的htmlFor值，输入ID也相同

React - 使用一个函数处理多个切换按钮（输入类型无线电）

1 个答案: