React 基础：使用状态添加交互性

让我们探索 React 如何通过状态 (state) 和事件处理器 (event handlers) 帮助我们添加交互性。

以创建一个 "点赞" 按钮为例，首先在你的 HomePage 组件中添加一个按钮元素：

index.html

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 事件：

index.html

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

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

处理事件

你可以定义一个函数来 "处理" 触发的事件。在 return 语句前创建一个名为 handleClick() 的函数：

index.html

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

然后，在 onClick 事件触发时调用 handleClick 函数：

index.html

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

在浏览器中运行此代码，观察开发者工具中日志输出的增加情况。

状态与钩子

React 提供了一系列称为钩子 (hooks) 的函数。钩子允许你向组件添加额外逻辑，例如状态 (state)。你可以将状态视为 UI 中随时间变化的信息，通常由用户交互触发。

你可以使用状态来存储和增加用户点击 "点赞" 按钮的次数。实际上，用于管理状态的 React 钩子名为：useState()

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

index.html

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

数组的第一项是状态 值，你可以任意命名。建议为其取一个描述性名称：

index.html

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

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

index.html

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

你还可以为 likes 状态设置初始值 0：

index.html

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

然后，通过在组件中使用状态变量来检查初始状态是否正常工作：

index.html

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

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

index.html

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

现在点击按钮将调用 handleClick 函数，该函数会以当前点赞数加 1 作为参数调用 setLikes 状态更新函数。

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

管理状态

这只是状态的入门介绍，关于在 React 应用中管理状态和数据流还有更多内容。要了解更多，我们建议你阅读 React 文档中的添加交互性和管理状态部分。

额外资源：

状态：组件的记忆

认识你的第一个钩子

响应事件

使用状态添加交互性

监听事件

处理事件

状态与钩子

管理状态

On this page