反应更改用户名

Question

我正在做一项练习 React 编程的任务，这就是任务 -更改用户名

这是解释：

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

Username 组件已完成，不应更改，但 App 组件缺少部分。完成 App 组件，以便 Username 组件在单击按钮时显示输入的文本。

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>

这是给出的代码：

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);

我尝试了很多来了解如何解决这个问题，但我无法解决这个问题，如何解决这个问题？

Answer 1

刚发现。似乎您需要对所有内容使用 refs。不允许任何状态或任何东西！请注意，您不应该在现实世界的应用程序中这样做:)

function App() {
  const ref = React.useRef()
  const inputRef = React.useRef()

  function clickHandler() {
    ref.current.changeValue(inputRef.current.value)
  }


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