如何使用 ReactJS 实现切换？

如果我们想为一个按钮实现切换功能，那么我们可以在我们的组件中设置状态为真或假，并且基于状态的值我们可以实现切换功能。当我们单击按钮并且状态的当前值为 true 时，我们将其更改为 false，反之亦然。当我们更改状态时，组件将重新渲染并根据状态的值显示内容。

创建反应应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

项目结构：

示例：这里我们将创建一个按钮组件来切换，我们也将使用 JavaScript this 关键字。

App.js

import React from 'react'
   
class Counter extends React.Component {
   
    render() {
        return(
            

                 
            
        )
    }
}
  
class Button extends React.Component{
    state = {
        textflag: false,
    }
       
    ToggleButton() {
        this.setState(
            {textflag : !this.state.textflag}
        );
    }
   
    render() {
        return(
            

                 this.ToggleButton()}>
                  { this.state.textflag === false ? "Hide":"Show" }
                
                {!this.state.textflag && this.props.text}
            
        )
    }
}
  
export default Counter;

输出：