javascript - 在单击反应中的下拉列表时保持文本区域的焦点

Question

我有一个场景，即使我与其他组件（如下拉菜单）交互，我也需要使 textarea 集中。我知道我们不能同时关注两个元素，但我想知道这是否可以在 react 中使用 refs 来完成。

我见过像 JIRA 这样的网站，它们会做这些事情。例如：在下图中，即使我与上面的日历交互，日期输入仍保持焦点。

这是我的代码。即使我们与 Dropdown 组件交互，我也希望 Textarea 组件成为焦点。如何在反应中实现这一目标？

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <Textarea />
      <br />
      <Dropdown />
    </div>
  );
}

function Textarea() {
  return <textarea rows="10" cols="40"></textarea>;
}

function Dropdown() {
  return (
    <select>
      <option>Pizza</option>
      <option>Pasta</option>
      <option>Burger</option>
    </select>
  );
}

标签： javascriptreactjsrefs