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

我正在尝试将焦点设置为单击父div的输入

您可以使用以下事件执行此操作：

Cannot read property 'next' of undefined

修改

使用闭包来获取合成事件：

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

Answer 2

可能不是最好的实施，但应该有效。

目标元素可以是任何子元素，因此无论点击哪个子元素，我们都需要找出正确的输入元素。为此，我将数据索引属性分配给可能与事件关联的所有元素。

然后维护一个实例变量inputElements，它存储每个输入元素的DOM节点。

注意确保将此实例变量设置为[]。我在map函数中设置它，但需要在任何相关位置的构造函数中设置它。

不必要地存储太多的DOM节点并不是那么好，但是再一次，它只是3-4个元素的问题。所以，它应该没问题。

请试一试，如果需要任何修改，请告诉我。

Object.keys(this.state.cdata).map((id,val) => {
  // This should be outside, place it somewhere relevant.
  this.inputElements = [];
  return (
   <div 
     key={val}
     data-index={val}
     onClick={this.select.bind(this, this.state.cdata[id].id)}
    >
     <div 
       data-index={val}
       className={(this.state.cdata[id].id === this.state.active)?'country-edit':''}
     >
       <i data-index={val} className="fa fa-globe" aria-hidden="true"></i>
       <div data-index={val} className="country-name">{this.state.cdata[id].name}</div>
         <input 
           ref={(elem) => { this.inputElements[val] = elem }}
           type="text"
           value={this.state.cdata[id].name}
           className="hidden"
           onChange={this.edit}
           onKeyPress={this.check}
         />
       </div>
     </div>
   )
})

然后你的事件处理程序将从目标元素中找出索引，因为每个元素都有可用于处理它应该处理的特定索引的数据。

select(datas, e) {
  const clickableIndex = e.target.dataset.index;
  if(clickableIndex) {
    this.inputElements[clickableIndex].focus();
    this.setState({active: clickableIndex});
  }
}

如何设置焦点反应js的循环内部输入

2 个答案: