使用需要连接的名称字符串来响应 ref 属性访问答案

【问题标题】：React ref attribute access with name string that needed to be concatenated使用需要连接的名称字符串来响应 ref 属性访问
【发布时间】：2016-09-08 06:31:52
【问题描述】：

在React/javascript中，有这样一个map函数

{this.state.caseDetails.plaintiff.map((p, i)=>{
  return(
    <div className={`col-lg-${inputWidth}`}>
      <input type="hidden" ref={'plaintiff_id_' + i} value={p.id} />
      <input type='text' ref={'plaintiff_name_' + i} className='form-control' defaultValue={p.name}/>
    </div>
  )
})}

我通过连接 i 变量创建了上述 plaintiff_id_0 属性，最大数组大小。但是，现在的问题是我想使用 ref 获取这些数据的值，所以我创建了一个这样的 for 循环：

for (var i = 0 ; i < this.state.caseDetails.plaintiff.length; i++) {
      console.log(this.refs.("plaintiff_id_".concat(i)).value);
      //Tried this.refs.("plaintiff_id_"+i).value etc.
}

还有不同类型的版本将 i 连接到字符串，但它一直告诉我这是一个语法错误，是否可以按我的意愿访问这些 ref？

【问题讨论】：

标签： javascript reactjs concat

【解决方案1】：

试试这个：

for (var i = 0 ; i < this.state.caseDetails.plaintiff.length; i++) {
      console.log(this.refs["plaintiff_id_".concat(i)].value);
  //OR
      console.log(this.refs["plaintiff_id_" + i].value);
}

【讨论】：

选择这个作为答案，因为它解决了它干净、清晰和最快的响应。

【解决方案2】：

您可以使用括号表示法并执行以下操作：this.refs['plaintiff_id_' + i]。

【讨论】：

【解决方案3】：

您应该能够使用 refs 访问 DOM 元素，如下所示：

for (var i = 0 ; i < this.state.caseDetails.plaintiff.length; i++) {

  var plaintiffIdRef = "plaintiff_id_" + i;
  console.log(React.findDOMNode(this.refs[plaintiffIdRed]).value)

  var plaintiffNameRef = "plaintiff_name_" + i;
  console.log(React.findDOMNode(this.refs[plaintiffNameRef]).value)

}

【讨论】：