我被困在这个 React Testdome 问题上

Question

这让我非常恼火——这是来自 TestDome React 的一个问题，我被卡住了——有人可以帮我一把吗？提前致谢！ （这是链接：https://www.testdome.com/d/react-js-interview-questions/304） 这是问题：

此应用程序应允许用户通过输入自定义值并单击按钮来更新其用户名。

Username 组件已完成，不应更改，但 App 组件缺少部分。完成 App 组件，使用户名组件在按钮被点击时显示输入的文本。

App 组件应该使用 React.useRef Hook 将输入传递给 Username 组件，用于 input 元素和 Username 组件。

例如，如果用户输入了一个新的用户名“John Doe”并点击了按钮，那么 id 为 root 的 div 元素应该如下所示：

<div><button>Change Username</button><input type="text"><h1>John Doe</h1></div>

// React is loaded and is available as React and ReactDOM
// imports should NOT be used
class Username extends React.Component {
  state = { value: "" };

  changeValue(value) {
    this.setState({ value });
  }

  render() {
    const { value } = this.state;
    return <h1>{value}</h1>;
  }
}

function App() {
  function clickHandler() {}

  return (
    <div>
      <button onClick={clickHandler}>Change Username</button>
      <input type="text" />
      <Username />
    </div>
  );
}

document.body.innerHTML = "<div id='root'></div>";
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

document.querySelector("input").value = "John Doe";
document.querySelector("button").click();
setTimeout(() => console.log(document.getElementById("root").innerHTML));

Answer 1

将 App 组件更新为这样

function App() {
  let userRef = React.useRef();
  let inputRef = React.useRef('');

  function clickHandler() {
    userRef.current.changeValue(inputRef.current.value);
  }

  return (
    <div>
      <button onClick={clickHandler}>Change Username</button>
      <input type="text" ref={inputRef} />
      <Username ref={userRef}/>
    </div>
  );
}