我有一个场景，基于一个数字（比如numberOfFlags），我想呈现numberOfFlags乘以一个单选按钮组。每个组都有两个单选按钮，批准和拒绝，如所附的screenx 1c 0d1x快照所示。如何在所有输入值发生变化时获取它们的值？最后，我必须将所有单选按钮的结果（批准/拒绝）存储在一个数组中，并发送到API
jm81lzqq1#
您需要在onChange函数上使用两个参数。一个用于当前索引，另一个用于Approve/Reject。如以下代码片段所示
onchange = handleOnChage(index, isApproveClicked)
5kgi1eie2#
您可以通过许多不同的方式来实现这一点，但我可能会简单地在父组件中创建一个带有值数组的状态，并将其传递给每个项目，以根据操作切换其自己的状态。App.js
export function App() { const [list, setList] = useState([false, false, false]); const updateItem = (value, index) => { let copyList = [...list]; copyList[index] = !value; setList(copyList); }; console.log(list) return ( <div className="App"> {list && ( <> {list.map((value, index) => ( <Item values={[value, index]} updateItem={updateItem} key={index+"_check"} /> ))} </> )} </div> ); }
Item.js
export default function Item({ values, updateItem }) { return ( <> <input onChange={() => updateItem(values[0], values[1])} type="checkbox" checked={values[0] ? "checked" : ""} /> </> ); }
4zcjmb1e3#
下面介绍的是实现所需目标的一种可能方式。
程式码片段
第一个
说明
添加到以上代码片段的内联注解。PS：如果你想为stackoverflow社区增加价值，
3条答案
按热度按时间jm81lzqq1#
您需要在onChange函数上使用两个参数。一个用于当前索引，另一个用于Approve/Reject。如以下代码片段所示
5kgi1eie2#
您可以通过许多不同的方式来实现这一点，但我可能会简单地在父组件中创建一个带有值数组的状态，并将其传递给每个项目，以根据操作切换其自己的状态。
App.js
Item.js
4zcjmb1e3#
下面介绍的是实现所需目标的一种可能方式。
程式码片段
第一个
说明
添加到以上代码片段的内联注解。
PS：如果你想为stackoverflow社区增加价值，