javascript - 在事件中启用 react 渲染或禁用它

Question

我正在制作一个弹出菜单，但我不知道如何让它弹出或弹出 :D。 我正在考虑制作某种 onclick={handleClick()} ，它将包含某种可以打开或关闭渲染器的代码。 这是我的 react 代码

    class App extends React.Component {
    state = {
        //a javascript object
        objects: [
            {
                option: 'Edit Event',
            },
            {
                option: 'Delete Event',
            },
        ]
    }
    cancelHandler() {
        display(none);
    }
    render() {
        return (
            <div className="popUp">
                <div className="object">
                    {
                        this.state.objects.map((item, index) => {
                            return (
                                <div key={index} className="container">
                                    <p className="menuItems">{item.option}</p>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="cancel-button">
                    <p className="cancel">Cancel</p>
                </div>
            </div>
        );
    }
}
ReactDOM.render(<App />, document.getElementById('menu'));

我想要发生的是，当我按下取消 p 标签时，页面上的所有元素(该文件中的元素)都会消失。

Answer 1

我更喜欢按照您需要的方式使用 bool 变量和函数

  class App extends React.Component {
      this.state = {
          renderElements: true,
          objects: [
             {
                 option: 'Edit Event',
        },
        {
            option: 'Delete Event',
        },
        ]
      }
      cancelHandler = () => {
          this.setState({ 
               renderElements: false
          });
       }
      render() {
            const { renderElements} this.state;
            return (
                <div className="popUp">
                    { renderElements && (<div className="object">
                      {
                    this.state.objects.map((item, index) => {
                        return (
                            <div key={index} className="container">
                                <p className="menuItems">{item.option}</p>
                            </div>
                        )
                    })
                }
            </div>
            <div className="cancel-button">
                <p className="cancel" onClick={this.cancelHandler}>Cancel</p>
            </div>
           )}
        </div>
           );
       }
    }
    ReactDOM.render(<App />, document.getElementById('menu'));

此功能将在您单击取消时隐藏，否则将显示