用于设置复选框 ref 和检查复选框状态的反应语法答案

【问题标题】：React syntax for setting checkbox ref and checking checkbox state用于设置复选框 ref 和检查复选框状态的反应语法
【发布时间】：2019-04-17 20:46:03
【问题描述】：

我有一个输出复选框列表的 React 组件。我正在尝试为每个复选框设置一个 ref，其 ID 是从 handleChange 函数中提取的。我想使用 networkService 成功收集的 id 变量命名 ref “id - checkbox”：

networkService = ({id, label, service_state, active_path = [], z_end = []} = {}) => (
<tr>
  <td>
    <form>
      <input type="checkbox" ref="REF HERE WITH id-checkbox" onChange={() => this.handleChange(`${id}`)} />
    </form>
  </td>      
</tr>

)

我已尝试多次迭代 ${id} - checkbox，如 ref=${id} - checkbox，但出现错误。

此外，在另一个函数中，我需要通过 ref 检查该复选框的状态，而语法又超出了我的范围。这是函数：

 handleChange = (id) => {

     if (this.refs.CHECKBOX REF HERE.checked) {

id 成功来自上面显示的 onChange 调用。

任何帮助将不胜感激。

【问题讨论】：

为什么不创建一个反应元素来包装复选框，把你的handleChange 代码放在那里，然后使用event bubbling 来保持容器状态是最新的？编辑：或者只是使用 <input> 上 React 公开的 onChange 属性来设置一个回调，其中 this 绑定到 <input> 的 DOM 对象（即不需要引用)。

标签： javascript reactjs checkbox

【解决方案1】：

networkService = ({id, label, service_state, active_path = [], z_end = []} = {}) => (
<tr>
  <td>
    <form>
      <input type="checkbox" ref={id+"-checkbox"} onChange={() => this.handleChange(id)} />
    </form>
  </td>      
</tr>


handleChange = id => {
let refName=id+"-checkbox"
     if (this.refs[refName].checked) {

【讨论】：

感谢您的回答，非常感谢！
Roopak 确实很感激。我刚刚接受了你的回答。