Question

我正在尝试创建一个单选按钮组件，这使我有些头疼。

这是我的代码：

class RadioButton extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = { selected: '' };
  }
  handleRadioButtonChange = event =>
    this.setState({ selected: event.target.value });
  render() {
    const { disabled, label, name, value } = this.props;
    const { selected } = this.state;
    return (
      <StyledLabel>
        <RadioButtonComponent
          id={value}
          name={name}
          value={value}
          checked={selected === value}
          disabled={disabled}
          onChange={this.handleRadioButtonChange}
        />
        <span>{label}</span>
      </StyledLabel>
    );
  }
}

RadioButtonComponent是我用来按所需方式设置单选按钮的样式。

const RadioButtonComponent = ({ checked, ...props }) => (
  <RadioButtonContainer>
    <HiddenRadioButton checked={checked} {...props} />
    <StyledRadioButton checked={checked}>
      <Icon viewBox="0 0 24 24">
        <circle />
      </Icon>
    </StyledRadioButton>
  </RadioButtonContainer>
);

HiddenRadioButton是样式为“ radio”的输入，并且已隐藏的库中的hideVisually函数将其隐藏。 StyledRadioButton是一个样式化的组件div，其样式设置为使其看起来像我想要的样子。

它可以按显示的水平工作，可以单击并打开它们。显然，它们不能被关闭。但是，当我创建2个具有相同名称的复选框时：

<RadioButton value="1" name="group" />
<RadioButton value="2" name="group" />

我可以选择两者。我希望其中一个可以关闭，而另一个可以打开。

当我将RadioButtonComponent更改为输入type =“ radio”时，它可以工作，但看起来并不理想。另外，似乎我必须单击两次以选择它。

任何想法可能有什么问题吗？

编辑： 如果我取消隐藏html复选框，它会切换。但是StyledRadioButton无法获得正确的“已检查”状态吗？

代码和框：https://codesandbox.io/s/j5zorwr3v

Answer 1

我不确定我为什么要使用四个组件来实现此目的，但是我看到一个区域会引起不必要的复杂性-您正在尝试将单选按钮实现为单独的组件，而实际上单选按钮更像是要选择下拉菜单。您将有多个值，但是只有一个被“选中”，并且状态中仅存储一个值。

您可以将每个无线电分解为它自己的组件，但是随后您必须管理多个组件之间的选定状态，我相信这是可以优化代码的地方。参见此代码沙箱：

https://codesandbox.io/s/9jjwwzwoxw

这是我能想到的最简单的工作示例。请注意，我们为单个组件提供了各种值，然后在这些值上映射以创建每个单选按钮。

还请注意，您可以将样式自定义应用于地图中的某个组件，这与尝试管理多个无线电组件中的选定状态不同。

编辑：我添加了一个示例，说明如何在每个单选单中添加className和CSS样式以确定要检查的元素。

同名React单选按钮

1 个答案: