Question

我有一个React组件，它正在输出复选框列表。我试图为每个复选框设置一个带有从handleChange函数提取的ID的引用。我想使用由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>

）

我在ref = ${id} - checkbox中尝试了${id} - checkbox的多次迭代，但是遇到了错误。

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

 handleChange = (id) => {

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

该ID已成功从上面显示的onChange调用中获取。

任何帮助将不胜感激。

Answer 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) {

React语法，用于设置复选框ref和检查复选框状态

1 个答案: