7
章节7
使用状态添加交互性
让我们探索 React 如何帮助我们使用**状态**和**事件处理程序**添加交互性。
例如，让我们在您的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 中任何随时间变化的信息，通常由用户交互触发。
您可以使用状态来存储和递增用户点击“点赞”按钮的次数。实际上，用于管理状态的 React Hook 称为：useState()
将useState()添加到您的项目中。它返回一个数组，您可以使用**数组解构**在组件内部访问和使用这些数组值
function HomePage() {
// ...
const [] = React.useState();
// ...
}数组中的第一项是状态值，您可以将其命名为任何内容。建议将其命名为一些描述性的名称
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 文档中的添加交互性和管理状态部分。
其他资源
这有帮助吗？