我试图在React中创建一个Raidobutton。下面是代码。当我点击第一个单选按钮(“Windows”),单选按钮显示选中,当我点击第二个单选按钮(“Mac”),单选按钮不显示选中,即使选中是真的。当我们再次点击“Mac”单选按钮被选中。之后,所有的单选按钮工作正常。有人能帮助这个吗?
import './App.css';
import { useState } from 'react';
const options = ["Windows", "Mac", "Linux"]
const days = ["Male", "Female"]
const TempRadio = ({ item, group }) => {
const [checked, setChecked] = useState('')
const handleChnage = (e) => {
console.log(e.target.value)
setChecked(() => e.target.value)
}
return (
<label>
<input type="radio" value={item} checked={item === checked} name={group} onChange={ handleChnage} />{item}
</label>
)
}
function App() {
const renderItems = (items, group) => {
return <div className='myul'>{items.map((item) =>
<TempRadio item={item} key={item} group={group} />
)}</div>
}
return (
<div className="App">
<header className="App-header">
<h1>
Which OS?
</h1>
{renderItems(options, "OS")}
<h2>Gender</h2>
{renderItems(days, "time")}
</header>
</div>
);
}
export default App;
2条答案
按热度按时间iaqfqrcu1#
您创建单选按钮的方法不对。因为您给每个单选按钮指定了自己的状态,所以它将无法工作:
你需要的是这样的东西:
5rgfhyps2#
由于您正在对单选按钮进行分组,并且您可能希望对两个集合的输出执行"某些操作",因此转移状态管理的职责to the parent component(在本例中为
App
)是有意义的。因此,在
app
中,state是一个对象,它使用group
值作为键,并使用所单击单选按钮的值作为其值。在这个例子中,我创建了一个
RadioGroup
组件来帮助管理数据流,在这里传递了相应的选项,以及组标签、组名称、该组的状态和共享处理程序。(The
useEffect
是临时的--它只是显示当每个单选按钮组中的按钮发生变化时状态是如何更新的。我还重新标记了days
/time
变量,因为它似乎与实际内容--性别--没有关系。)