Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyembunyikan butang sebagai tindak balas
Cara melaksanakan butang tersembunyi dalam tindak balas: 1. Gunakan mesin keadaan untuk menetapkan "nama_pameran" 2. Letakkan butang kawalan dalam div untuk pembentangan; display_name" Hanya tunjukkan dan sembunyikan butang.
Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.
Bagaimana untuk menyembunyikan butang sebagai tindak balas?
React menggunakan diaplay untuk merealisasikan pembentangan dan menyembunyikan butang kawalan
Rendering adalah seperti berikut
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;
tutorial video bertindak balas"
Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan butang sebagai tindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!