создавать новый экземпляр перехода при каждом клике (реагировать на переходную группу) - PullRequest
1 голос
/ 26 апреля 2020

Итак, вкратце, у меня уже был переход, который смотрел, если isAddRoom истинно, тогда сделайте переход (работает нормально). Теперь я пытаюсь выполнить sh, что каждый раз, когда пользователь нажимает кнопку «Отправить», я, очевидно, устанавливаю исходное состояние, но я также хочу переход с пустой формой newRoomform при каждой передаче. Я не совсем уверен, что смотреть, чтобы создать эффект.

от формы размещения до перехода формы комнаты

<SwitchTransition>
              <CSSTransition
                key={this.state.isAddRoom}
                addEndListener={(node, done) =>
                  node.addEventListener('transitionend', done, false)
                }
                classNames="fade"
              >
                {(isAddRoom || this.state.isAddRoom) === true ? (
                  <CreateRoomForm
                    ScrollBar={ScrollBar}
                    LabelInput={LabelInput}
                    currentState={this.state}
                    handleChange={() => this.handleChange}
                    removeItem={this.removeItem}
                    handleMultipleChange={this.handleMultipleChange}
                    setTheState={this.setTheState}
                  />
                ) : (
                  <CreateAccommodationForm
                    ScrollBar={ScrollBar}
                    LabelInput={LabelInput}
                    currentState={this.state}
                    handleChange={() => this.handleChange}
                    removeItem={this.removeItem}
                    handleMultipleChange={this.handleMultipleChange}
                    setTheState={this.setTheState}
                  />
                )}
              </CSSTransition>
            </SwitchTransition>
          </div>

Мои состояния компонентов

this.state = {
      services: {
        values: [],
        input: '',
      },
      amenities: {
        values: [],
        input: '',
      },
      name: '',
      type: '',
      cost: '',
      bedrooms: 0,
      size: 0,
      room_number: '',
      address: '',
      description: '',
      geoLocation: '',
      files: [],
      urls: [],
      isDragging: false,
      isAddRoom: false,
    };
...