Nikulio
@Nikulio
NaN !== NaN

Как поочередно показывать элементы?

Нужна такая логика:
Когда я добавил новый элемент в базу, я скрываю <div/> с этим элементом и генерирую (или показываю уже готовый <div/>? ). Как такое можно реализовать?

Пример:
Зашел на сайт, передо мной форма: введите имя и фамилию. Ввёл, форма скрылась, открылась другая, где нужно ввести дату рождения и место жительства.
Нужно что-то вроде этого.
  • Вопрос задан
  • 127 просмотров
Пригласить эксперта
Ответы на вопрос 2
HighQuality
@HighQuality
☁ Ниндзя девелопер
Сделать две формы. Слушать сабмит. По сабмиту первой формы — меняем state — скрываем первую форму и показываем вторую форму.

Всё решается штатными средствами реакта.
Ответ написан
rockon404
@rockon404 Куратор тега React
Frontend Developer
Можно, примерно, так:
render() {
  const isUserInfoFormActive = ...; // your conditions
  const isUserAddressFormActive = ...; // your conditions

  return (
    <Wrapper>
      {isUserInfoFormActive && <UserInfoForm />}
      {isUserAddressFormActive && <UserAddressForm />}
    </Wrapper>
  );
}


Если шагов много, рациональней написать FormWidget:
class FormWidget extends Component {
  ...
  getContent() {
     const { children, activeStep } = this.props;

     return React.Children.map(children, (child, i) => {
      if (activeStep === i + 1) {
        return React.cloneElement(child, { key: i });
      }

      return null;
    });
  }

  handleNext = () => {
    ...
  };

  handlePrev = () => {
     ...
  };

  render() {
    ...
    return(  
      <div>
        <Content>{this.getContent()}</Content>
        <div>
           <Button onClick={this.handlePrev}>{prevButtonLabel}</Button>
           <Button onClick={this.handleNext}>{nextButtonLabel}</Button>
        </div>
      </div>
    );
  }
}

и предавать детьми все шаги:
render() {
  return (
     <FormWidget>
      <Step1 />
      <Step2 />
      <Step3 />
      <Step4 />
      <Step5 />
      <Step6 />
      <Step7 />
      <Step8 />
      <Step9 />
      <Step10 />
     </FormWidget>
  );
}


Пример очень абстрактный. Раскрывается сама идея.
Всю реализацию писать, все-таки, долго.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы