7
章节7
通过状态添加交互性
让我们探索 React 如何帮助我们通过状态和事件处理程序添加交互性。
例如，让我们在你的 HomePage 组件中创建一个“喜欢”按钮。首先，在 return() 语句中添加一个 button 元素
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>
);
}最后，你可以调用你的状态更新函数 setLikes 在你的 HomePage 组件中，让我们将其添加到你之前定义的 handleClick() 函数中
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 文档中的添加交互性和管理状态部分。
额外资源
这有帮助吗？