React隐藏显示功能-优快云博客

本文链接：https://blog.youkuaiyun.com/liuhui_hui/article/details/84847237

本文介绍了一个使用React实现的隐藏和显示功能，通过点击按钮切换标签内容的可见性，利用state和条件渲染实现交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

显示隐藏功能

我要实现的功能：
1.点击关闭按钮时隐藏标签的内容
2.点击ON按钮时实现显示标签的内容
render里面要包含

<div>
  <div>
    <span></span>
  <div>
  <button></button>
<div>

在这里插入图片描述
实现代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Greeting from './Greeting';
import registerServiceWorker from './registerServiceWorker';

class LoginControl extends React.Component {
    constructor(props) {
        super(props)
        this.state={clickOn:false}
        this.handleClick = this.handleClick.bind(this)
        //this.handleShow = this.handleShow.bind(this)
    }
    handleClick(e) {
        this.setState(({clickOn:!this.state.clickOn}))
    }
    render() {
        let style = {display :this.state.clickOn ? 'none' : 'block' }
       /* if(this.state.clickOn){
            style={display: 'none'}
        }else {
            style={display: 'block'}
        }*/
        return (
           <div>
               <div  style={style}>
                   <span>显示！</span>
               </div>
               <button onClick={this.handleClick}>{this.state.clickOn ? 'ON' : 'OFF'}</button>
           </div>
        );
    }
}
ReactDOM.render(
    <LoginControl />,
    document.getElementById('root')
);