Итак, у меня есть веб-страница React.

Родительский компонент содержит все дочерние компоненты (раскрывающиеся списки, переключатели, таблицы и т. Д.). После отправки всех форм с помощью кнопки я хочу, чтобы все состояния компонентов вернулись к нулю.

Это возможно без Redux. Я знаю, что я должен определенно использовать Redux на этом этапе, и я собираюсь начать изучать его в ближайшие пару дней, но перед тем, как прыгнуть, я просто хотел бы обернуть голову, если то, что я пытаюсь сделать, возможно / невозможно без реакции.

Просто для душевного спокойствия и полного понимания.

1
Young Scooter 20 Авг 2018 в 23:06

4 ответа

Лучший ответ

Вы можете сохранить все значения состояния в родительском компоненте и передать их как реквизиты с обработчиком изменений для ваших презентационных компонентов. Тогда вы можете просто сбросить все состояние при отправке формы. Это, вероятно, самый «реагирующий» способ сделать это.

Если вы не хотите этого делать, вы можете передать своего рода реквизит «reset» каждому из ваших дочерних компонентов, и когда этот реквизит изменится на true, сбросить состояние, а затем сбросить родительский реквизит «reset» обратно в false. , Однако я лично не думаю, что это отличный способ сделать это, и настоятельно рекомендую первый вариант.

Изменить: вам определенно не нужно вводить излишки, чтобы выполнить то, что вы пытаетесь сделать

5
Nick Swope 20 Авг 2018 в 20:11

Поскольку я проголосовал, я рекомендую логику @Nick Swope. Тем не менее, я хочу привести два примера. Я не уверен, что это подходит для вашей ситуации, но вот примеры.

class App extends React.Component {
  state = {
    name: "",
    select: "",
  }

  defaultState = {
    name: "",
    select: "",
  };


  handleChane = e => this.setState( {
    [ e.target.name ]: e.target.value,
  } );

  handleSubmit = ( e ) => {
    e.preventDefault();
    alert( JSON.stringify( this.state ) );
    this.setState( this.defaultState );
  }

  render() {
    console.log( this.state );
    return (
      <form onSubmit={this.handleSubmit} >
        <Input onChange={this.handleChane} />
        <Select onChange={this.handleChane} />
        <button>Send</button>
      </form>
    );
  }
}

const Input = props => (
  <div>
    <input onChange={props.onChange} name="name" />
  </div>
);

const Select = props => (
  <div>
    <select onChange={props.onChange} name="select">
      <option>Choose one</option>
      <option>Foo</option>
      <option>Bar</option>
      <option>Baz</option>
    </select>
  </div>
);

ReactDOM.render(
  <App />,
  document.getElementById("root")
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

В этом примере вы сохраняете состояние по умолчанию, а после отправки формы вы сбрасываете состояние. Как видите, значения формы все еще там. Теперь вот второй вариант:

class App extends React.Component {
  state = {
    name: "",
    select: "",
  }

  defaultState = {
    name: "",
    select: "",
  };

  formRef = React.createRef();

  handleChane = e => this.setState( {
    [ e.target.name ]: e.target.value,
  } );

  handleSubmit = ( e ) => {
    e.preventDefault();
    alert( JSON.stringify( this.state ) );
    this.setState( this.defaultState );
    this.formRef.current.reset();
  }

  render() {
    console.log( this.state );
    return (
      <form ref={this.formRef} onSubmit={this.handleSubmit} >
        <Input onChange={this.handleChane} />
        <Select onChange={this.handleChane} />
        <button>Send</button>
      </form>
    );
  }
}

const Input = props => (
  <div>
    <input onChange={props.onChange} name="name" />
  </div>
);

const Select = props => (
  <div>
    <select onChange={props.onChange} name="select">
      <option>Choose one</option>
      <option>Foo</option>
      <option>Bar</option>
      <option>Baz</option>
    </select>
  </div>
);

Здесь вы отдыхаете и очищаете форму, используя реф. Я не могу поместить это во фрагмент, так как версия React здесь немного старше.

1
devserkan 20 Авг 2018 в 21:09

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

Затем дети могут реагировать на этот reset реквизит в его хуке жизненного цикла (componentWillReceiveProps или getDerivedStateFromProps).

0
bathpp 20 Авг 2018 в 21:03

Несколько простых вариантов:

1) перезагрузить всю страницу:

  location.reload();

2) перемонтировать компонент приложения:

 reactDOM.unmount(document.body);
 reactDOM.render(<App />, document.body);
-1
Jonas Wilms 20 Авг 2018 в 20:15
51937825