鍍金池/ 問(wèn)答/HTML/ react讓div隱藏，使用onClick={()=>{this.hand

react讓div隱藏，使用onClick={()=>{this.handleClick}}無(wú)效

class Basic extends React.Component {

    constructor() {
        super();

        this.closeDiv = this.closeDiv.bind(this);
    }

    closeDiv(show_div,bg_div)
    {
        document.getElementById(show_div).style.display='none';
        document.getElementById(bg_div).style.display='none';
    }
    
    render() {
        var divStyle = {
            width: 1511,
            height: 1068,
            left: 207.7,
            top: 90.86,
            position: 'absolute'
        }



        return (
            <div>
                <div style={divStyle} className={'cs001'}>

                </div>

                {/* 彈出層時(shí)背景層DIV */}
                <div id = {'fade'} className = {'black_overlay'}>

                </div>

                <div id={'MyDiv'} className={'white_content'}>
                    <div id={'move'}>
                        <span className={'close'}
                              onClick={()=>{this.handleClick('MyDiv', 'fade')}}>
                            關(guān)閉
                        </span>
                    </div>
                    <div id={'newPage'}>
                        目前來(lái)說(shuō)，我還是喜歡這個(gè)自己改造的彈出層。自己在項(xiàng)目中也用的是這個(gè)。
                    </div>
                </div>
            </div>
        )
    }
}
回答
編輯回答
祈歡

onClick={()=>{this.handleClick('MyDiv', 'fade')，這是事件名是不是寫錯(cuò)了，我只看到closeDiv的

2017年6月17日 20:37
編輯回答
醉淸風(fēng)

我把你的例子改了下，你試試.

class Basic extends React.Component {

  constructor() {
    super();
    this.state = {show_div: true, bg_div: true}
  }

  render() {
    var divStyle = {
      width: 1511,
      height: 1068,
      left: 207.7,
      top: 90.86,
      position: 'absolute'
    }

    const {show_div, bg_div} = this.state;

    return (
      <div>
        <div style={divStyle} className={'cs001'}>

        </div>

        {/* 彈出層時(shí)背景層DIV */}
        <div id = {'fade'} className = {'black_overlay'} style={{display: bg_div ? 'block': 'none'}}>

        </div>

        <div id={'MyDiv'} className={'white_content'} style={{display: show_div ? 'block': 'none'}}>
          <div id={'move'}>
                        <span className={'close'}
                              onClick={()=> this.setState({bg_div: false, show_div: false})}>
                            關(guān)閉
                        </span>
          </div>
          <div id={'newPage'}>
            目前來(lái)說(shuō)，我還是喜歡這個(gè)自己改造的彈出層。自己在項(xiàng)目中也用的是這個(gè)。
          </div>
        </div>
      </div>
    )
  }
}

react中不要操作dom...

2017年6月21日 09:52
編輯回答
柒喵

把onClick={()=>{this.handleClick('MyDiv', 'fade')}}換成 onClick={()=>{this.closeDiv('MyDiv', 'fade')}}>

2017年11月12日 13:43