时间戳

首页 > 解决方案 > 带有功能组件的事件

reactjs - 带有功能组件的事件

问题描述

我刚刚开始学习 REACT，并在网上学习了一些课程。我创建了一个非常简单的函数组件，并且我想实现一个事件，父组件可以使用它。我可以在网上找到很多关于如何使用类组件的绑定（构造函数）来执行此操作的示例和文章。但是我还没有找到任何关于功能组件的文章。任何人都有关于如何执行此操作的简单示例或文章？总的来说，我看到很多关于使用函数组件而不是类组件的建议，但更多的文章和框架是人们使用类组件的。功能组件是否相当新？

import React, { useState } from "react";
import {
  Dropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem,
  Button
} from "reactstrap";

const DropdownPaging = props => {
  const [selectedValue, setSelectedValue] = useState(10);
  const [dropdownOpen, setDropdownOpen] = useState(false);

  const toggle = () => setDropdownOpen(prevState => !prevState);

  function dropDownChanged(val) {
    setSelectedValue(val);
  }

  return (
    <div>
      <table>
        <tr>
          <td>
            <Button outline color="dark">
              &lt;
            </Button>
          </td>
          <td>
            <Button outline color="dark">
              &gt;
            </Button>
          </td>
          <td>
            <Dropdown isOpen={dropdownOpen} toggle={toggle}>
              <DropdownToggle caret outline color="dark">
                {selectedValue}
              </DropdownToggle>
              <DropdownMenu>
                <DropdownItem onClick={() => dropDownChanged(10)}>
                  10
                </DropdownItem>
                <DropdownItem onClick={() => dropDownChanged(25)}>
                  25
                </DropdownItem>
                <DropdownItem onClick={() => dropDownChanged(50)}>
                  50
                </DropdownItem>
                <DropdownItem onClick={() => dropDownChanged(100)}>
                  100
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </td>
        </tr>
      </table>
    </div>
  );
};

export default DropdownPaging;

标签： reactjs

解决方案

不，功能组件是很久以前就有的，功能组件的新特性之一是处理状态和生命周期方法

所以在 16.8 之前的版本，函数式组件纯粹是用来渲染表现部分的，所以不能处理状态，不能处理生命周期方法

因此，在处理大型应用程序时，问题是如果您需要单个状态变量，则需要将功能组件更改为类组件

所以在 16.8 发布之后，React 团队引入了 hooks，所以现在你可以借助 hooks 来处理状态和生命周期方法

钩子是怎么来的

  1. 渲染道具 - 组件之间共享代码 -这里
  2. Hoc Components - 重用组件逻辑 -在这里

你可以在这里阅读更多关于钩子的信息。

使用钩子的例子

  1. 异步数据加载 -这里
  2. 使用状态 -这里
  3. 渲染表数据并根据状态键禁用行 -这里
  4. 自定义挂钩 - 窗口调整大小 -在这里

如果您正在更新并尝试上述代码和框，请分叉并更新。（这对其他人会有所帮助:)）

推荐阅读