React简单教程-4-事件和hook

前言

在上一章 React 简单教程-3-样式 中我们建立了一个子组件，并稍微美化了一下。在另一篇文章 React 简单教程-3.1-样式之使用 tailwindcss 章我们使用了 tailwind 来写样式，以后我代码里的样式都会使用 tailwind 来写。

这一章，我将给我们的子组件加一个按钮，以实现交互的功能。

什么功能？

我们现在的子组件如下图：

现在它没有交互功能，我想给他的灰色按钮加一个点击事件，点击后将内容收起，如下：

实现

首先，我们的灰色按钮，现在只是一个 span 元素，需要先将它换成 button 元素，样式不变，我们只需要直接将标签从 span 换成 button 就可以了。

export function Displayer(props: { name: string, content: string }) {
  const name = props.name;
  const content = props.content;
  return (
    <div className="bg-gray-800 text-white p-2 m-2 rounded-lg">
      <div className="nav">
        <span className="btn-red"></span>
        <span className="btn-yellow"></span>
        {/* 灰色按钮 */}
        <button className="btn-gray"></button>
      </div>
      <div className="body">
        <div>{name}</div>
        <div>{content}</div>
      </div>
    </div>
  );
}

之后添加点击事件。就跟我们在 html 元素上添加一样，在按钮的 onclick 里绑定事件，React 也一样，但是写法需要是小驼峰写法：onClick，React 的组件所有属性都是小驼峰下发。我们在组件里定义一个方法用来处理这个按钮的事件，然后将方法赋给 onClick 属性：

export function Displayer(props: { name: string, content: string }) {
  //    忽略
  //    定义的处理方法
  function handleClick() {}
  return (
    <div className="bg-gray-800 text-white p-2 m-2 rounded-lg">
      {/* 忽略 */}
      {/* 灰色按钮 */}
      <button className="btn-gray" onClick={handleClick}></button>
      {/* 忽略 */}
    </div>
  );
}

我们绑定方法的时候，方法名要写在花括号里，根据规范，处理事件的方法一般以 handle 开头。现在我们的方法 handleClick 里没有任何实现。

接下来，要隐藏我们的内容元素，可以直接使用 hidden 属性来隐藏：

<div className="body" hidden></div>

但是这是静态的操作，我们要在点击按钮后动态隐藏。我们会想到定义一个变量 isHidden，将变量赋给要隐藏的元素：

<div className="body" hidden="{isHidden}"></div>

通过按钮事件，将值变为 true，当值为 true 时，元素就隐藏了。但是如果你试一遍的话，就会发现是不起效的。因为你只是改变了变量，没有重绘界面，所以界面是不会变化的。

在 React 里需要怎么做呢？

使用 useState hook

什么是 hook？在本文中，我不打算详细介绍什么是 hook（下一章里我会介绍），但是我想先让你感受下 hook。在 react 中，你会经常看到以 use 开头的方法，你可以认为这些方法就是 hook，是 React 提供的用于实现一些特性的功能。这里我们将使用这个 hook 来解决上面的问题。

hook useState 是干什么的？跟随下面一边写一边感受一下。

导入 useState 并使用：

//  导入 hook
import { useState } from "react";

export function Displayer(props: { name: string, content: string }) {
  //  使用 hook
  const [hidden, setHidden] = useState(false);
}

看示例，hook 就是一个方法，也跟使用方法一样使用。在示例中，useState(false) 返回了一个数组，数组中的第一个参数是一个变量，第二个参数是修改这个变量的方法，使用 useState 可以传入这个变量的默认值，在示例中，我传入了 false，根据类型推断，数组中的第一个参数被推断出是 boolean 类型。

从这里，你应该能够看出，hook useState 的作用是创建变量。和一般变量的不同的地方在于，它提供了修改这个变量的方法 setHidden，这个修改的方法，特点在于，它会重绘这个组件！

也就是说，当我们调用 setHidden，传入新的值，修改了变量后，它会让这个组件的界面更新一遍，这样，组件的界面就可以发生变化了！

在我们的子组件中感受一下，使用 useState 创建的变量来代替我们的 isHidden 变量，代码如下：

export function Displayer(props: { name: string, content: string }) {
  //    忽略
  const [hidden, setHidden] = useState(false);

  function handleClick() {
    setHidden(true);
  }

  return (
    <div className="bg-gray-800 text-white p-2 m-2 rounded-lg">
      <div className="nav">
        {/* 忽略 */}
        <button className="btn-gray" onClick={handleClick}></button>
      </div>
      <div className="body" hidden={hidden}>
        {/* 忽略 */}
      </div>
    </div>
  );
}

在上面的代码上，按钮 button 的 onClick 绑定了处理函数，函数里调用了 setHidden(true);，将 hidden 的值设为 true，并触发了重绘，重绘时，因为 hidden 的值为 true，内容元素的 hidden 被触发，内容元素隐藏。

就这样，实现了我们点击隐藏的效果。亲手试一试，感受一下 hook。

扩展习题

你能不能扩展这个功能，让按钮再点击一下，就展开内容元素？

总结

1. 本文章我们学会了按钮元素点击事件的用法。其他事件的用法也大同小异，比如 onChang。
2. 学会了第一个 hook：useState，并知道这个 hook 起到了什么作用。

在下一章中，将介绍其他几个常用 hook。