React 中的 HTML 复选框

Question

我有两个单选按钮，我想根据这些单选按钮向用户显示复选框列表。但问题是当用户选中第一个列表中的任何复选框时，它也会自动选中第二个列表中的框。

这是我的单选按钮：

<input 
checked={optionLocal==='residential' ? 'checked' : ''}                                  
onClick={()=>{
setOptionLocal('residential')
}} 
type="radio" 
id="residential" 
name="option" 
value="residential"/>

<input 
checked={optionLocal==='commercial' ? 'checked' : ''} 
onClick={()=>{
setOptionLocal('commercial')
}} 
type="radio" 
id="commercial" 
name="option" 
value="commercial"/>

当我单击其中一个时，它会在本地存储状态并根据该列表生成。

optionLocal === 'residential' ? (
                            residential.map((row,index)=>{
                                return(
                                    <li>
                                        <div className="d-flex flex-row align-items-baseline px-3">
                                            <input 
                                            type="checkbox" 
                                            id={'r-' + row} 
                                            name={'r-' + row} 
                                            value={'r-' + row}/>
                                        </div>
                                    </li>
                                )
                            })
                        ) : (
                            commercial.map((row,index)=>{
                                return(
                                    <li>
                                        <div className="d-flex flex-row align-items-baseline px-3">
                                            <input 
                                            type="checkbox" 
                                            id={'c-' + row} 
                                            name={'c-' + row} 
                                            value={'c-' + row}/>
                                        </div>
                                    </li>
                                )
                            })
                        )

这是正在发生的事情。

Answer 1

这是因为您对两个列表使用相同的状态属性。您可以为每个列表中的选定项目存储两个不同的属性，或者在单选按钮中选择不同选项时清除状态

额外提示：当您使用 map 并返回 JSX 元素时，您应该在返回的元素上设置 key 属性，在本例中为：li。由于列表是相同的，因此每次状态更改时都不会渲染所有列表。