Next.js 如何管理组件状态答案

【问题标题】：How do you manage component state in Next.jsNext.js 如何管理组件状态
【发布时间】：2020-11-01 17:31:54
【问题描述】：

我正在制作一个组件，该组件将跟踪用户在输入中输入的文本，并在更改时调用方法。我计划将输入的值存储在状态中，但 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>
  );
}

提前感谢您的帮助

【问题讨论】：

这样在函数组件中没有this。建议阅读Function and Class Components。另请阅读有关Using the State Hook 的更多信息。
是的，功能组件中没有this 访问权限。
如果有人使用基于类的 React.Component。只是提醒您在构造函数中绑定您的 handleClick 函数。 this.handleClick = this.handleClick.bind(this);像个白痴一样忘记它后花了3个小时

标签： reactjs next.js

【解决方案1】：

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

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)

【讨论】：

如果有人使用基于类的 React.Component。只是提醒您在构造函数中绑定您的 handleClick 函数。