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

Question

[Nikita Shchypylov]

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

Пример:
Зашел на сайт, передо мной форма: введите имя и фамилию. Ввёл, форма скрылась, открылась другая, где нужно ввести дату рождения и место жительства.
Нужно что-то вроде этого.

Answer 1

[Артур Борденюк]

Сделать две формы. Слушать сабмит. По сабмиту первой формы — меняем state — скрываем первую форму и показываем вторую форму.

Всё решается штатными средствами реакта.

Comments

[Nikita Shchypylov]

Если у меня будет 8 форм - это не будет костылём?

[Артур Борденюк]

Nikita Shchypylov, нет, всё ок, одно же поле в стейте будет.

[Nikita Shchypylov]

Артур, Так, проверил. Да, стейт один, но код разростется неймоверно. 8 разных обработчиков, 8 элементов формы. Точно-точно не костыль ?)

Что то вроде этого на примере двух форм :

addMessage = e => {
    e.preventDefault();
    let data = {
      component: this.state.component,
      component_name: this.state.component_name
    };
    this.setState({ current_form: "test-2" });
    this.props.addComponent(data);
  };

  addMessage_test = e => {
    e.preventDefault();
    let data = {
      component: this.state.component,
      component_name: this.state.component_name
    };
    this.setState({ current_form: "test-3" });
    this.props.addComponent(data);
  };

{current_form == "test-1" && (
          <form onSubmit={this.addMessage.bind(this)}>
            <input
              type="text"
              value={this.state.component}
              onChange={e => this.setState({ component: e.target.value })}
            />
            <input
              type="text"
              value={this.state.component_name}
              onChange={e => this.setState({ component_name: e.target.value })}
            />
            <input type="submit" />
          </form>
        )}
        {current_form == "test-2" && (
          <form onSubmit={this.addMessage-test.bind(this)}>
            <input type="text" placeholder="new" />
            <input
              type="text"
              value={this.state.component}
              onChange={e => this.setState({ component: e.target.value })}
            />
            <input
              type="text"
              value={this.state.component_name}
              onChange={e => this.setState({ component_name: e.target.value })}
            />
            <input type="submit" />
          </form>
        )}

[Артур Борденюк]

Nikita Shchypylov, конечно, у тебя же будет 8 форм!

просто колбасу эту не тащи в одном ренедере, распихать можно даже по компонентам разным разные шаги формы

Answer 2

[Антон Спирин]

Можно, примерно, так:

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

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

Comments

[Nikita Shchypylov]

К сожалению, в моем проекте нет каких-то якорей в виде предназначении форм. Это как туду-лист. Там все формы "безликие"

[Антон Спирин]

Nikita Shchypylov, вам по хорошему сделать FormWidget в котором будет хандлер next, по которому инициируется валидация активного шага и если все в порядке переключается активный шаг в state, на следующий или происходит submit если шаг был последний.
Сами же шаги, это просто набор инпутов во все передается значение из state FormWidget и хандлер на изменение.

[Nikita Shchypylov]

Антон Спирин, Хорошо, а показывать/скрывать? Дать шагам id и показывать/скрывать с помощью...?

[Антон Спирин]

Nikita Shchypylov, посмотрите накидал абстрактный пример. Там сама идея раскрывается, как это сделать.

[Nikita Shchypylov]

Антон Спирин, Вау, интересно! Вообще не знал таких методов. Можно вам тут отписывать, если с чем то столкнусь?