使用需要连接的名称字符串访问React ref属性

React ref attribute access with name string that needed to be concatenated

本文关键字：访问 字符串 React ref 属性 连接      更新时间：2023-09-26

在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我想要的?

试试这个:

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);
}

您可以使用括号表示法，如:this.refs['plaintiff_id_' + i] .

您应该能够使用ref访问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)
}
相关文章：