반응에서 버튼을 숨기는 방법

반응에서 숨겨진 버튼을 구현하는 방법: 1. 상태 머신을 사용하여 "display_name"을 설정합니다. 2. 프레젠테이션을 위해 div에 제어 버튼을 배치합니다. 3. 값을 수정하여 버튼의 프레젠테이션과 프레젠테이션을 제어합니다. 상태 머신 "display_name" 그냥 숨기세요.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

반응에서 버튼을 숨기는 방법은 무엇입니까?

React는 diaplay를 사용하여 컨트롤 버튼의 표시 및 숨기기를 구현합니다

1. 효과를 얻으려면

• 편집 아이콘을 클릭하여 페이지에서 해당 버튼을 구현하고 숨깁니다.

• 효과 다이어그램

2. 코드 구현

import React, { Component } from 'react';
import '../../../style_css/antd.css';
import { Layout,Icon,Row, Col} from 'antd';
class Index extends Component {
    // 状态机
    constructor(props, context) {
        super(props, context);
        this.state = {
            display_name: 'none', //此状态机为display的取值
        }
    }
    display_name() { //编辑按钮的单击事件，修改状态机display_name的取值
        if (this.state.display_name == 'none') {
            this.setState({
                display_name: 'block',
            })
        }
        else if (this.state.display_name == 'block') {
            this.setState({
                display_name: 'none',
            })

        }
    }
    render() {
        return (
            <layout>
                {/* 一行：按钮 */}
                <div>    {/* 通过状态机display_name获取diaplay取值 */}
                    <row>
                        <col>
                        
                        <col>
                            <div>
                                <span><button>详情</button> </span>
                                <span><button>添加</button></span>
                                <span><button>修改</button></span>
                                <span><button>删除</button></span>
                                <span><button>查看关联</button></span>
                            </div>
                        
                    </row>
                </div>
                {/* 通过icon实现编辑图标 */}
                <div>
                    <row>
                        <col>
                        
                        <col> {/* 通过display_name函数来改变状态机display_name的值来改变display取值 */}
                            <icon></icon>
                        
                    </row>
                </div>
                {/* 页面内容 */}
                <layout>
                    <content>
                        {this.props.children}
                    </content>
                </layout>
            </layout>
        );
    }
}
export default Index;

• 표시 속성은 콘텐츠 표시 및 숨기기를 제어할 수 있습니다. 없음은 숨김을 의미하고, 차단은 표시를 의미합니다
• 첫 번째 단계: 사용 display_name을 설정하는 상태 머신
• 두 번째 단계: 프레젠테이션을 위해 div에 컨트롤 버튼을 배치합니다. div 콘텐츠 표시 여부는 표시를 통해 구현됩니다. 3단계. : 편집 아이콘에 클릭 이벤트 추가: 상태 머신의 display_name을 수정합니다. 상태 머신이 값을 변경하면 페이지가 즉시 로드됩니다. 즉, 컨트롤 버튼 표시 및 숨기기
• 추천 학습: "

반응 동영상 튜토리얼

"

위 내용은 반응에서 버튼을 숨기는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!