react项目，点击组件就隐藏然后再点击会出现，请问怎么才能实现？this.state.show无效

Question

mport React from 'react'
import './style.css'

/**
 * 功能：默认设置界面
 */

function getComponentCookie() {

    return import('../../utils/cookie').then(Cookie=> {

        //var timer_flag = Cookie.getCookie('timer');
        //console.log('timer_flag');
        //console.log(timer_flag)

    }).catch(error => 'An error occurred while loading the component');
}



class RightList extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            show : true
        };
    }

    handleClick() {
        var that = this;
        // 点击按钮改变样式
        console.log('点击帮助列表');
        console.log(this.state.show);
        if(this.state.show)
        {
            document.getElementById('parent').style.display = 'block';
        }
        else
        {
            document.getElementById('parent').style.display = 'none';
        }

        this.setState({show: !this.state.show});
    }

    //组件的props发生改变,在组件接收到一个新的prop时被执行。这个方法在初始化render时不会被调用。
    componentWillReceiveProps(nextProps) {
        if(nextProps) {
            this.setState(
                {
                    text:nextProps.text
                }
            );
        }
    }

    componentDidMount() { // 初始化render之后只执行一次

        //console.log('定时器结尾');
        document.getElementById('parent').style['fontSize'] = '85px';

    }


    render() {
        return (
            <div id='parent' onClick={this.handleClick}>
                开启轮播=={this.props.text}
            </div>
        )
    }
}


export default RightList;

import React from 'react'
import './style.css'

/**
 * 功能：默认设置界面
 */


class RightList extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            show : true
        };
    }

    handleClick() {
        this.setState({show:!this.state.show});
        event.stopPropagation()
        event.preventDefault()
        // 点击按钮改变样式
        //console.log('点击帮助列表');

    }


    componentDidMount() { // 初始化render之后只执行一次

        //console.log('定时器结尾');
        //document.getElementById('parent').style['fontSize'] = '85px';

    }


    render() {
        var show= this.state.show?"block":"none";
        var style = {
            display:show,
            fontSize: 85
        }
        return (
            <div id='parent' onClick={this.handleClick} style={style}>
                开启轮播=={this.props.text}
            </div>
        )
    }
}


export default RightList;

隐藏后就无法显示了

import React from 'react'
import './style.css'

/**
 * 功能：默认设置界面
 */


class RightList extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            show : true
        };
    }

    handleClick() {
        this.setState({show:!this.state.show});
        event.stopPropagation()
        event.preventDefault()

        
        // 点击按钮改变样式
        //console.log('点击帮助列表');
        if(this.state.show)
        {
            document.getElementById('parent').style.display = 'block';
        }
        else
        {
            document.getElementById('parent').style.display = 'none';
        }

    }


    componentDidMount() { // 初始化render之后只执行一次

        //console.log('定时器结尾');
        document.getElementById('parent').style['fontSize'] = '85px';

    }


    render() {

        return (
            <div id='parent' onClick={this.handleClick.bind(this)} >
                开启轮播=={this.props.text}
            </div>
        )
    }
}


export default RightList;

Answer 1

不要操作dom不要操作dom不要操作dom！！！

and

为什么隐藏之后不显示？？？
兄弟，你都display: none了，这dom都没了，你点都点不到它，你还怎么触发它上面的click事件啊

两种方案

1.外面包一层有宽高的div，点击事件放在这个div上面

    render() {
        return (
          <div
            style={{ width: '200px', height: '200px', backgroundColor: 'red' }}
            onClick={this.handleClick}
          >
            {this.state.show && (
              <div id="parent" style={{ fontSize: '85px' }}>
                开启
              </div>
            )}
          </div>
        )
      }

2.改变透明度

    render() {
        let m = this.state.show ? '1' : '0'
        return (
          <div
            id="parent"
            style={{
              fontSize: '85px',
              opacity: m
            }}
            onClick={this.handleClick}
          >
            开启
          </div>
        )
      }

Answer 2

handleClick() {
    this.setState({show:!this.state.show});
}
render() {
    var show= this.state.show?"block":"none";
    var style = {
        display:show
    }
    return (
        <div id='parent' onClick={this.handleClick} style={style}>
            开启轮播=={this.props.text}
        </div>
    )
}

Answer 3

handleClick的this指向有问题，要bind(this)

 return (
            <div id='parent' onClick={this.handleClick.bind(this)}>
                开启轮播=={this.props.text}
            </div>
        )

或者用箭头函数

 return (
            <div id='parent' onClick={()=>{this.handleClick()}}>
                开启轮播=={this.props.text}
            </div>
        )

class Header extends React.Component{
    constructor(props,el){
        super(props);
        //this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
        this.state = {
            myval:'',
            show:true
        }
    }
    change(e){
        console.log(e.target);
        this.setState({myval:e.target.value})
    }
    click(aaa){
        console.log(aaa);
    }
    toggle(){
        this.setState({show:!this.state.show})
    }
    render(){
        return(
            <header className="header">
                <input type="text"  onChange={(e)=>{this.change(e)}}/>
                <h1 style={{display:this.state.show?'block':'none'}}>{this.state.myval}</h1>  
                <button onClick={this.toggle.bind(this)}>按钮</button>                     
            </header>
        )
    }
    componentDidMount(){

    }
}

Answer 4

把handleClick这个函数，写成箭头函数试试

Answer 5

大清亡了这么多年，怎么还有人在react里操作dom

Answer 6

style={{display: this.state.show ? "block" : "none"}}

Answer 7

虽然我没有想到比大家更好的解决办法，但是兄弟，react里面如果操作了dom，那react存在的意义是什么？