React:切换按钮类组件示例

本教程解释了如何编写一个具有开或关功能的React按钮组件的例子。

在这个组件中，首先显示带有 "开 "字的按钮，当点击这个按钮时，如何将文本从 "开 "或 "关 "变为 "关"，或者反过来。

React切换按钮类组件示例

让我们创建一个React类组件，并通过以下说明进行解释

• 通过扩展创建一个反应式组件React.component
• 在Render中用JSX语法添加按钮组件
• 添加按钮点击事件
• 在一个组件的构造函数中。
  • 通过写super(props)作为第一行来初始化父级props
  • 通过用布尔值更新isOff的默认值来初始化一个状态。
• 添加了使用点击绑定的按钮处理程序

下面是一个例子

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

class ToggleButtonOnOff extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
    this.state = {isOff: false};
  }

  handleClick() {
    this.setState({isOff:!this.state.isOff});
  }

  render() {
    const { isOff } = this.state;
    let title=this.state.isOff? "ON":"OFF";
    return (
      <button onClick={this.handleClick}>{title}</button>
    );
  }
}

ReactDOM.render(
  <ToggleButtonOnOff />,
  document.getElementById('root')
);

上面的代码是用一个带有react钩子的功能组件重写的。

useState钩子被用来初始化初始值和函数，在点击事件处理程序中改变。

这里我们使用了一个内联的点击事件处理程序来处理按钮的点击 以下是一个React按钮切换开关功能组件的例子

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const ToggleButtonOnOff = () => {
  const [isOff, setIsOff] = useState(true);

  return (
    <button onClick={() => setIsOff(!isOff)}>{ isOff ? 'ON' : 'OFF' }</button>
  );
}

ReactDOM.render(
  <ToggleButtonOnOff />,
  document.getElementById('root')
);