Question

使用React，我试图在单击某些按钮/元素时专注于输入元素。我需要能够在渲染多次后切换焦点。

例如，如果单击名称按钮，则名称输入框应该聚焦。如果我单击地址按钮，地址输入框应该聚焦。

我熟悉jQuery这样做，但它似乎没有像React.js那样表现出来。

编辑：

我正在尝试使用按钮打开菜单。菜单打开后，我希望焦点自动显示在输入字段上。

我尝试过以下方法：

 function timeNow() {
  
        var d = new Date(),
        h = (d.getHours() < 10 ? '0' + d.getHours() : '') + d.getHours(),
        m = (d.getMinutes() < 10 ? '0' + d.getMinutes() : '') + d.getMinutes();

        // To check for a time range (between 4:: and 11:30 here):
        var morningTime = (h >= 5 && h <= 12) ? true : false;
        var noonTime    = (h >= 12 && h <= 17) ? true : false;
        var nightTime   = (h >= 17 && h <= 5)  ? true : false;
        var greeting = "";

        if (morningTime) {
            greeting = "Good Morning";
        } else if (noonTime) {
            greeting = "Good Afternoon";
        } else if (nightTime) {
            greeting = "Good Evening";
        }

        return greeting;
    }
    document.getElementById('dashboard-hello').innerHTML = timeNow() + ', name!';

使用标签/用于语义。（不起作用，因为标签与输入的格式不同。）

Answer 1

为您希望能够应用焦点的输入字段创建ref。我把它命名为textInput。我在这里使用了es6语法。

<input
  type="text"
  ref={node => {
     this.textInput = node 
  }
}/>

现在您已引用该节点，现在可以从组件中的任何位置访问输入元素。

要将焦点应用于此输入元素，就像this.textInput.focus()

一样简单

创建一个将焦点方法应用于被引用节点的函数。

 handleMenuClick() {
   this.textInput.focus()
 }

现在，当有人点击菜单按钮时，您可以调用此功能

<div 
 onClick={this.handleMenuClick.bind(this)}
> I AM MENU TITLE </div>

Answer 2

一种非常简单的方法是使用<label>元素：

<div>
<label for='input1'>Click here</label>
<input type='text' id='input1' />
</div>
<div>
<label for='input2'>Click here</label>
<input type='text' id='input2' />
</div>
<div>
<label for='input3'>Click here</label>
<input type='text' id='input3' />
</div>

工作示例：https://jsfiddle.net/kq3okzas/

Answer 3

使用label。没有必要的JavaScript。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

Answer 4

您可以使用The ref Callback Attribute。举一个输入的例子：

render() {
  // Use the `ref` callback to store a reference to the text input DOM
  // element in this.textInput.
  return (
    <div>
      <input
        type="text"
        ref={(input) => { this.textInput = input }}
      />
      ...
    </div>
  )
}

然后，您可以通过以下方式明确关注输入：

this.textInput.focus();

单击DIV时，请关注输入

4 个答案: