章节7

使用 State 添加交互性

让我们探讨 React 如何通过state和事件处理程序帮助我们添加交互性。

例如，让我们在你的HomePage组件中创建一个“赞”按钮。首先，在return()语句中添加一个按钮元素

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <button>Like</button>
    </div>
  );
}

监听事件

要让按钮在点击时执行操作，你可以使用onClick事件

function HomePage() {
  // ...
  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
  );
}

在 React 中，事件名称采用驼峰命名法。onClick事件是你可以用于响应用户交互的众多事件之一。例如，你可以对输入字段使用onChange，或对表单使用onSubmit。

处理事件

你可以定义一个函数来“处理”事件，无论何时触发它们。在 return 语句之前创建一个名为handleClick()的函数

function HomePage() {
  // ...
 
  function handleClick() {
    console.log("increment like count")
  }
 
  return (
    <div>
      {/* ... */}
	  <button onClick={}>Like</button>
    </div>
     )
   }

然后，你可以在触发onClick事件时调用handleClick函数

function HomePage() {
  // 	...
  function handleClick() {
    console.log('increment like count');
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Like</button>
    </div>
  );
}

尝试在浏览器中运行此代码。注意在开发者工具中日志输出如何增加。

状态和 Hook

React 有一组名为 Hook 的函数。Hook 允许你向组件添加额外的逻辑，例如状态。你可以将状态视为 UI 中随时间变化的任何信息，通常由用户交互触发。

Two different examples of state: 1. A toggle button that can be selected or unselected. 2. A like button that can be clicked multiple times.

你可以使用状态来存储和递增用户点击“赞”按钮的次数。实际上，用于管理状态的 React Hook 叫做：useState()

将useState()添加到你的项目。它返回一个数组，你可以使用数组解构在组件内访问和使用这些数组值

function HomePage() {
  // ...
  const [] = React.useState();
 
  // ...
}

数组中的第一项是状态value，你可以随意命名。建议将其命名为具有描述性的名称

function HomePage() {
  // ...
  const [likes] = React.useState();
 
  // ...
}

数组中的第二项是用于更新值的函数。你可以随意命名更新函数，但通常以set作为前缀，后跟要更新的状态变量的名称

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState();
 
  // ...
}

你还可以借此机会将likes状态的初始值设置为0

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
}

然后，你可以通过在组件内使用状态变量来检查初始状态是否正常工作。

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
  // ...
 
  return (
    // ...
    <button onClick={handleClick}>Like({likes})</button>
  );
}

最后，你可以在HomePage组件中调用状态更新函数setLikes，让我们将其添加到你之前定义的handleClick()函数中

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  );
}

现在，点击按钮将调用handleClick函数，该函数会调用setLikes状态更新函数，并传递当前点赞数 + 1 作为单个参数。

注意：与作为第一个函数参数传递给组件的 props 不同，状态是在组件内部初始化和存储的。你可以将状态信息作为 props 传递给子组件，但更新状态的逻辑应保留在最初创建状态的组件中。

管理状态

这只是对状态的介绍，你可以了解更多关于在 React 应用程序中管理状态和数据流的知识。要了解更多，我们建议你查阅 React 文档中的添加交互性和管理状态部分。

其他资源

状态：组件的记忆

认识你的第一个 Hook

响应事件