reactjs - reactjs中同名复选框如何将值保留为数组

Question

一定要快点

<input type="checkbox" name="name1[]" value="1" />
<input type="checkbox" name="name1[]" value="2" />

注意名称 [] 中的括号 - 在经典 html 中，使用此发布表单，POST 正文将包含此

{name1:[1,2]}

现在构建一个reactjs，输入有名称，参考，但我也可以在那里使用括号吗？似乎不起作用...具有预定义的对象，通过 .map() 函数我输出复选框，但是如何用最短的代码保持它们的值？

实际上，它超级简单，如果我把它写成

<select ref="name1" name="name1" multiple="true" ....

用复选框做这件事的最简单方法是什么，用 select 我得到了this.refs["name1"]，没有任何开销的麻烦，请问如何用复选框做到这一点？避免任何疯狂的长编码？

标签： reactjs

Answer 1

方法是将复选框包装在父 div 中，然后通过其 ref 访问它们，如下所示：

<div
  ref={ref => this.inputs = ref}
>
  <input type="checkbox" name="name1" value="1" />
  <input type="checkbox" name="name2" value="2" />
  <input type="checkbox" name="name3" value="3" />
</div>

const array = this.inputs.children

const name1 = array[0]
const name2 = array[1]
const name3 = array[2]

我希望它对你有帮助。