ReactJS - Как удалить компонент кнопки, который был только что нажат? - PullRequest
Новая
       13

ReactJS - Как удалить компонент кнопки, который был только что нажат?

1 голос
/ 10 февраля 2020

Моя цель - удалить кнопку, которую я только что нажал. Я понимаю, что может быть множество способов, таких как создание компонента deleteButton и установка соответствующего состояния.

Тем не менее, моя функция возврата в главном компоненте приложения также отобразит еще одну кнопку (это я могу сделать), но я думаю, что это может добавить сложности.

В настоящее время я пытаюсь определить идеальное решение, поэтому, пожалуйста, помогите.

1 Ответ

0 голосов
/ 10 февраля 2020

Хорошо, так что мне удалось решить мой вопрос, хотя я уверен, что есть и другие способы.

Для дальнейшего уточнения ...

У меня была форма, которую я хотел для рендеринга, при нажатии на кнопку «Создать».

В то же время я хотел убрать кнопку «Создать», один раз нажав.

Конечным результатом является только отображение формы и вложение новой кнопки в функцию возврата.

1) Установите начальное состояние формы в false: 

this.state = {
  displayForm: false,
}

2) Затем используйте setState в функции displayForm, чтобы разрешить изменение состояния, после нажатия кнопки: 

displayForm(){
  this.setState({
    displayForm: !this.state.displayForm {/* true */}
  })
}

3) установить объект стиля в функции рендеринга, например: 

render() {
  const btnStyle = {
    display: 'block',
  } ...

4) Использовать оператор IF, чтобы изменить стиль отображения кнопки, если форма имеет был обработан 

if(this.state.displayForm){
  btnStyle.display = 'none'
}

5) Теперь в функции возврата используйте соответствующие теги JSX и вызывайте функцию onClick, а также применяемый стиль. 

<Button
  style={btnStyle}
  onClick={() => {
    this.displayForm()
  }}>Create</button>
  {this.state.displayForm && ([
   <Form />,
   <br />,
   <Button>Add Schema</Button>,
  ])}

ПРИМЕЧАНИЕ : компоненты и

Итак, после нажатия кнопки «Создать» отображается форма (true), и, таким образом, кнопка «Создать» исчезает из Virtual DOM. Я также вложил еще одну (новую) кнопку, как и предполагалось, под формой.

...