react上如何禁止button渲染

发布时间：2023-07-17 11:00:48 所属栏目：教程来源：未知

导读： 　　这篇“react中如何禁止button渲染”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有

　　这篇“react中如何禁止button渲染”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“react中如何禁止button渲染”文章吧。

　　react中禁止button渲染的方法：1、打开相应的js代码文件；2、找到“const flags = true;<Button disabled={flags}/>”并将其中的“true”值修改为“false”即可禁止button。

　　react 中 button按钮的禁用和启用状态

　　disabled 为false 是启用状态

　　// 启用状态

　　    const flags = true;

　　    <Button disabled={flags}/>

　　disabled 为 true 是禁用状态

　　// 禁用状态

　　    <Button disabled/>

　　// 禁用状态2 变量控制

　　    const flags = false;

　　    <Button disabled={flags}/>

　　下面拓展聊聊React自定义组件--Button

　　这是主要js代码

　　import React, { Component } from 'react'

　　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;

　　这是样式代码

　　@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;

　　    }

　　}

　　最后引用示例

　　import './App.css';

　　import Button from './component/Button/index'

　　function App() {

　　 const handleClick = () => {

　　    alert('我是组件');

　　 }

　　 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='default'>small</Button>

　　        <Button size='small'>small</Button>

　　        <Button size='large'>small</Button>

　　        <Button disabled={true} >a</Button>

　　        <Button size='default' circle={true} >a</Button>

　　        <Button size='small' circle={true} >a</Button>

　　        <Button size='large' circle={true} >a</Button>

　　      </header>

　　    </div>

　　 );

　　}

　　export default App;

（编辑：航空爱好网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!