【问题标题】:handling n checkboxes in a react component处理反应组件中的 n 个复选框
【发布时间】:2024-01-20 00:49:01
【问题描述】:

如果我想处理 n 组 [variable, setVariable] 类型的变量,我该怎么做才能在组件中声明 n 个状态

问题是我可以有 n 个复选框,我必须处理这 n 个复选框的值

【问题讨论】:

  • 这个问题引出了另一个问题,你尝试了什么,为什么它不起作用。似乎很少有人努力提出您的问题
  • 您是否尝试过使用长度为 n 的数组并使用复选框索引来动态更改值?

标签: javascript reactjs checkbox react-hooks state


【解决方案1】:

我不完全理解您的问题,但我假设您想存储 n 个复选框引用以便稍后对它们进行处理。所以这里有一个解决方案

const checkboxes = useRef({});

...

{data.map((x, idx) => <input type="checkbox" ref={(el) => checkboxes.current[idx] = el)}>

您将获得其中所有复选框的引用。

如果我的回答有误或者这个不对,请在cmets中告诉我,我会努力理解并更好地解决它

【讨论】:

  • 另请注意:此演示假定复选框的顺序和数量保持不变。如果在渲染过程中数字发生变化或发生任何重新排列,您应该为每个复选框元素提供一个 ID,然后它将是 checkboxes.current[YOUR_ID] = el