reactjs - 你如何在 Next.js 中管理组件状态

Question

我正在制作一个组件，该组件将跟踪用户在输入中输入的文本并在更改时调用一个方法。我计划将输入的值存储在状态中，但是 this 在/components 的 js 文件中未定义。这是我试过的

export default function TalentSearch() {
  this.state = 'val';

  return (
    <div>
      <button onClick={clicked}>click me</button>
      <input type="text" name="search" />
      <div>
        <p>{this.state.value}</p>
      </div>
    </div>
  );
}

提前感谢您的帮助

Answer 1

您在这里定义的是功能组件。只有类组件可以使用 this。因此，您可以更改类组件的内容，也可以使用 useState 钩子(Hook)简单地在功能组件中拥有状态，如下所示:

import { useState } from 'react'; 

export default function TalentSearch() {
  const [value, setValue] = useState("value")

  return (
    <div>
      <button onClick={clicked}>click me</button>
      <input type="text" name="search" />
      <div>
        <p>{value}</p>
      </div>
    </div>
  );
}

一些注意事项

• 只需在组件内的任何位置调用 value 即可获取当前状态，如果您想更改它，请使用设置状态函数，如下所示:setValue(new state)