Я делаю всплывающее меню и не знаю, как сделать его всплывающим или скрытым: D. Я думал создать своего рода onclick={handleClick()}, который будет содержать какой-то код, который будет включать или выключать рендерер. Это мой код реакции

    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, все элементы на странице исчезли (те, что в этом файле).

1
Ionut Eugen 13 Сен 2018 в 10:18

2 ответа

Лучший ответ

Я предпочитаю поступать следующим образом с логической переменной и функцией по мере необходимости.

  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'));

Эта функция будет скрыта, когда вы нажмете кнопку отмены, иначе отображается

1
halfer 13 Сен 2018 в 22:58

Не уверен, что понимаю, но, может быть, это то, что вы хотите?

    class App extends React.Component {
state = {
    //a javascript object
    showObjects: true,
    objects: [
        {
            option: 'Edit Event',
        },
        {
            option: 'Delete Event',
        },
    ]
}
cancelHandler() {
    display(none);
}
render() {
    return (
        <div className="popUp">
            <div className="object">
                {this.state.showObjects && 
                    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 onClick={() => this.setState({showObjects: false})} className="cancel">Cancel</p>
            </div>
        </div>
    );
}

Обычно я просто добавляю флаг showObjects.

0
Georgios Dimitriadis 13 Сен 2018 в 07:25