javascript - 如何将焦点设置在 react js循环内的输入上

Question

我正在尝试将焦点设置在点击其父 div 的输入上，我能够获得父 div 事件，我不知道 ref 如何在这个循环中帮助我，任何帮助将不胜感激。

select = (e,datas) => {
  selected = parseInt(e);
  this.setState({active: selected});
}

下面的 HTML

Object.keys(this.state.cdata).map((id,val) => {
  return (
   <div 
     key={val} 
     onClick={this.select.bind(this, this.state.cdata[id].id)}
    >
     <div className={(this.state.cdata[id].id === this.state.active)?'country-edit':''}>
       <i className="fa fa-globe" aria-hidden="true"></i>
       <div className="country-name">{this.state.cdata[id].name}</div>
         <input 
           type="text"
           value={this.state.cdata[id].name}
           className="hidden"
           onChange={this.edit}
           onKeyPress={this.check}
         />
       </div>
     </div>
   )
})

Answer 1

I am trying to set focus on input whose parent div is clicked

您可以使用事件来做到这一点:

select = (e,datas) => {
    //set focus to input
    e.target.querySelector('input').focus();
    selected = parseInt(e);
    this.setState({active: selected});
}

编辑

使用闭包获取合成事件:

select(datas){
  return function(e){
    e.target.querySelector("input").focus();
    //rest of code
  }
}

当您传递方法select 时，执行它以返回函数:

onClick={this.select().bind(this, myData)}