我正在尝试默认检查第一个单选按钮,以下代码可以帮助我做到这一点。加载页面时,会检查第一个单选按钮,但我面临的问题是它不允许我检查数组中也存在的其他按钮。
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
});
}
最佳答案
问题
defaultChecked
值是一个 bool 值,但您的条件 sortType === 0
将始终评估 false
,因为您的 sortType
code> 只是您的 sort
状态值之一,即 ["Apple", "Orange "]
。
解决方案
如果您希望默认选中第一个单选按钮,那么您应该与映射索引进行比较。
defaultChecked={index === 0}
其他问题和建议
- 单选按钮组输入均应具有相同的
name
属性。 - 使用语义
标签
来包装您的输入,以便更易于访问。 - 使用单选输入的
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>
))}
演示
关于reactjs - 我如何默认检查 react 中的单选按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65950345/