我如何默认检查反应中的单选按钮？

Question

我正在尝试默认选中第一个单选按钮，以下代码可以帮助我做到这一点。加载页面时，第一个单选按钮被选中，但我面临的问题是它不允许我检查数组中也存在的其他按钮。

constructor(props: any) {
        super(props);
        this.state = {
            selectedSort: '',
            sort: ['Apple', 'Orange '],
        }
    }
this.state.sort.map((sortType:string, index:number) => {
     return <span key={`${sortType}${index}` onClick={() => this.setSort(sortType)} >
     <input type="radio" id={sortType} 
            value={this.state.selectedSort} 
           name={sortType} defaultChecked={index===0} 
           }/>
          <span>{sortType}</span>
                               
                                    })
 private setSort = (selectedSort: string) => {
        this.setState({
            selectedSort: selectedSort
        });
}

Answer 1

问题

defaultChecked 值是一个布尔值，但您的条件 sortType === 0 将始终评估 false，因为您的 sortType 只是您的 sort 状态之一值，即 ["Apple", "Orange "].

解决方案

如果您希望默认选中第一个单选按钮，那么您应该与映射索引进行比较。

defaultChecked={index === 0}

其他问题与建议

单选按钮组输入应具有相同的 name 属性。
使用语义 label 包装您的输入，使其更易于访问。
使用无线电输入的 onChange 事件回调与 onClick 来更新状态。
单独的 sortType 值对于 React 键就足够了。

代码：

{this.state.sort.map((sortType, index) => (
  <label key={sortType}>
    <input
      type="radio"
      id={sortType}
      value={selectedSort}
      name="sortType"
      defaultChecked={index === 0}
      onChange={(e) => this.setState({ selectedSort: e.target.id })}
    />
    {sortType}
  </label>
))}

此外，我建议将其转换为完全受控的输入，因为您已经拥有了它的所有部件。删除 value 属性并使用 checked 属性。设置您想要的初始检查状态。这将允许您已经拥有有效的检查状态。

state = {
  selectedSort: 'Apple',
  sort: ['Apple', 'Orange '],
}

{this.state.sort.map((sortType, index) => (
  <label key={sortType}>
    <input
      type="radio"
      id={sortType}
      name="sortType"
      checked={sortType === this.state.selectedSort}
      onChange={(e) => this.setState({ selectedSort: e.target.id })}
    />
    {sortType}
  </label>
))}

我如何默认检查反应中的单选按钮？

How do i default check a radio button in react?

radio-button

reactjs

map-function

问题

解决方案

其他问题与建议

演示