Heim  >  Artikel  >  Web-Frontend  >  So deaktivieren Sie das Rendern von Schaltflächen in React

So deaktivieren Sie das Rendern von Schaltflächen in React

藏色散人
藏色散人Original
2023-01-19 13:58:591369Durchsuche

So deaktivieren Sie das Rendern von Schaltflächen in React: 1. Öffnen Sie die entsprechende js-Codedatei. 2. Suchen Sie nach „const flags = true;

So deaktivieren Sie das Rendern von Schaltflächen in React

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 18.0.0, Dell G3-Computer.

Wie deaktiviere ich das Rendern von Schaltflächen in React?

Der deaktivierte und aktivierte Status der Schaltfläche in React.

disabled ist falsch, was dem aktivierten Zustand entspricht.

//  启用状态
    const flags = true;
    <Button disabled={flags}/>

disabled ist wahr, was dem deaktivierten Zustand entspricht.

//  禁用状态
    <Button disabled/>
//  禁用状态2 变量控制
    const flags = false;
    <Button disabled={flags}/>

Lassen Sie uns erweitern und über benutzerdefinierte React-Komponenten sprechen. -Button

Dies ist der Haupt-JS-Code

import React, { Component } from &#39;react&#39;
import "./dist/index.css";
import PropTypes from "prop-types";
import classnames from "classnames";
class Button extends Component {
    constructor(props) {
        super(props);
        this.state = { }
    }
    handleClick = () => {
        if (!this.props.onClick) return;
        this.props.onClick();
    };
    render() { 
        //为了能让 Button 组件有多个样式选择,于是安装 classnames 插件来帮助切换类名来切换样式:
        const ClassName = classnames({  //根据父组件传进来的 size 来判断使用什么类名
            "btn": true,
            [`btn_${this.props.type}`]: true,
            [`btn_${this.props.size}`]: true,
            "btn_disabled": this.props.disabled,
            "btn_circle": this.props.circle,
        });
        return (
            <button
                className = {ClassName}
                onClick = {this.handleClick}
            >
                {this.props.children}
            </button>
         );
    }
}
//   组件的默认属性
Button.defaultProps = {
    children: "Button",
    type: "primary",
    size: "default",
    disabled: false,
    circle: false,
};
//   使用propTypes  进行组件属性的检查
Button.propTypes = {
    children: PropTypes.string,
    type: PropTypes.oneOf(["primary", "success", "warning", "danger", "info"]),
    size: PropTypes.oneOf(["default", "small", "large"]),
    disabled: PropTypes.bool,
    circle: PropTypes.bool,
};
 
export default Button;

Das ist der Stilcode

@bG-0: #fff;
@bF-1: #c0c4cc;
@PRIMARY: #409eff;
@SUCCESS: #67c23a;
@DANGER: #f65c6c;
@WARNING: #e6a23c;
@INFO: #909399;
@FONTSIZE: 14px;
@radius: 4px;
@btnBorderRadius: 4px;
@btnBorder: 1px solid transparent;
@btnMargin: 0 8px 12px 0;
@btnFontSize: 14px;
@btnLargeFontSize: 16px;
@btnSmallFontSize: 12px;
@btnPadding: 4px 15px;
@btnLargePadding: 6.4px 15px;
@btnSmallPadding: 1px 7px;
@btnDisabledCol: #909399;
.btn {
    width: 60px;
    height: 30px;
    border-radius: @btnBorderRadius;
    border: @btnBorder;
    outline: none;
    appearance: none;
    text-align: center;
    margin: @btnMargin;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    text-align: center;
    &_primary {
        background-color: @PRIMARY;
        color: @bG-0;
        &:hover {
            opacity: 0.8;
        }
    }
    &_success {
        background: @SUCCESS;
        color: @bG-0;
        &:hover {
            opacity: 0.8;
        }
    }
    &_danger {
        background: @DANGER;
        color: @bG-0;
        &:hover {
            opacity: 0.8;
        }
    }
    &_warning {
        background: @WARNING;
        color: @bG-0;
        &:hover {
            opacity: 0.8;
        }
    }
    &_info {
        background-color: @bG-0;
        color: black;
        border: 1px dashed #999;
        &:hover {
            opacity: 0.8;
        }
    }
    &_disabled {
        background-color: @bF-1;
        color: @btnDisabledCol;
        cursor: not-allowed;
        &:hover {
            opacity: 1;
        }
    }
    &_circle {
        padding: 0;
        font-size: 16px;
        text-align: center;
        width: 30px;
        height: 30px;
        overflow: hidden;
        border-radius: 50%;
        word-break: break-all;
    }
    &_large {
        font-size: @btnLargeFontSize;
    }
    &_default {
        font-size: @btnFontSize;
    }
    &_small {
        font-size: @btnSmallFontSize;
    }
}

Endlich zitiertes Beispiel

import &#39;./App.css&#39;;
import Button from &#39;./component/Button/index&#39;
function App() {
  const handleClick = () => {
    alert(&#39;我是组件&#39;);
  }
  return (
    <div className="App">
      <header className="App-header">
        <Button>查询</Button>
        <Button type = "success">成功</Button>
        <Button type = "warning">警告</Button>
        <Button type = "danger">失败</Button>
        <Button type = "info">灰色</Button>
        <Button onClick={ handleClick }>事件</Button>
        <Button size=&#39;default&#39;>small</Button>
        <Button size=&#39;small&#39;>small</Button>
        <Button size=&#39;large&#39;>small</Button>
        <Button disabled={true} >a</Button>
        <Button size=&#39;default&#39; circle={true} >a</Button>
        <Button size=&#39;small&#39; circle={true} >a</Button>
        <Button size=&#39;large&#39; circle={true} >a</Button>
      </header>
    </div>
  );
}
export default App;

Erfolge

So deaktivieren Sie das Rendern von Schaltflächen in React

Hinterlassen Sie einen Eindruck. Es gibt noch viele Mängel Gemeinsam vorankommen

Empfohlene Studie: „React-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo deaktivieren Sie das Rendern von Schaltflächen in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn