在 React js 函数组件中切换按钮单击

在 React js 函数组件中切换按钮单击是一种常见的交互方式，允许用户触发组件的状态更改。在本教程中，您将学习如何在 React 中创建切换按钮，并在单击按钮时切换状态。

步骤1：安装 React

首先，您需要在计算机上安装 React。您可以按照 React 文档中的说明进行安装。

步骤2：创建 React 组件

接下来，您需要创建一个 React 组件。您可以使用函数组件或类组件创建组件。以下是一个 React 函数组件的示例，它接受一个名为“text”的属性，并在页面上呈现该文本。

import React from 'react';

function MyComponent(props) {
  return (
    <div>{props.text}</div>
  );
}

export default MyComponent;

步骤3：添加切换按钮

在组件中添加一个按钮，用于单击以切换状态。在按钮上添加一个 onClick 处理程序，以便在按钮单击时调用函数。

import React, { useState } from 'react';

function MyComponent(props) {
  const [isToggleOn, setIsToggleOn] = useState(false);

  const handleClick = () => {
    setIsToggleOn(!isToggleOn);
  };

  return (
    <div>
      <button onClick={handleClick}>
        {isToggleOn ? 'ON' : 'OFF'}
      </button>
    </div>
  );
}

export default MyComponent;

此代码片段中的 handleClick 函数在按钮单击时调用，并使用 setIsToggleOn 函数切换 isToggleOn 状态。

步骤4：测试切换按钮

现在，您已经编写了一个 React 组件，并已添加了一个切换按钮，用于切换组件状态。运行 React 应用程序并测试按钮是否按预期工作。

import React, { useState } from 'react';

function MyComponent(props) {
  const [isToggleOn, setIsToggleOn] = useState(false);

  const handleClick = () => {
    setIsToggleOn(!isToggleOn);
  };

  return (
    <div>
      <button onClick={handleClick}>
        {isToggleOn ? 'ON' : 'OFF'}
      </button>
    </div>
  );
}

export default MyComponent;

结论

在本教程中，您已经学会了在 React js 函数组件中切换按钮单击。您可以使用此技术扩展您的 React 应用程序，并提供更好的用户交互性。