我正在尝试默认检查以下代码帮助我完成的第一个单选按钮。加载页面时,第一个单选按钮被选中,但我面临的问题是它不允许我检查数组中也存在的其他按钮。
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
});
}
答案 0 :(得分:2)
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>
))}