Question

我试着用它做一个小应用程序来学习React。我的应用程序有两个单选按钮，我想总是只检查其中一个，但似乎无法弄清楚当我选择另一个时如何取消选中另一个按钮。相反，他们都保持选中。这是一个jsfiddle：

以下是代码：

  <StackPanel>
    <CheckBox Content="IsValidCustomer" IsChecked="{Binding IsValidCustomer,Mode=TwoWay}"></CheckBox>
    <ListView ItemsSource="{Binding ListCustomers}" SelectedItem="{Binding SelectedCustomer,Mode=TwoWay}"></ListView>        
</StackPanel>

Answer 1

您需要在输入元素上提供name属性，以将它们标记为同一单选按钮组的一部分。带有radio类型的<input>元素的此标准行为。

在您的示例中，您可以使用：

<input type="radio" name="myGroupName" onChange={this.handleChange}>{this.props.myValue}</input>

Answer 2

只是调整了Chad的答案，万一有人遇到这个问题。

<input type="radio" name="myGroupName" onChange={this.handleChange}/>
<span>{this.props.myValue}</span>

不要在输入元素中添加任何子元素，因为React会抛出错误。只需在旁边使用跨度或标签作为可见文本。

Answer 3

添加属性checked并在那里进行比较。

示例：checked={this.state.myValue === true}

我将为您提供工作示例，两个单选按钮可控制true/false之间的值。

https://jsfiddle.net/4hs7v5qb/1/

如何只使用React选择一个单选按钮

3 个答案: