Как 'reset' элемент ReactJS?

Я пытаюсь 'reset' элемент ReactJS.

В этом случае элемент составляет 90% + содержимого страницы.

Я использую replaceState, чтобы заменить состояние элемента исходным состоянием.

К сожалению, подэлементы, у которых есть свое "состояние", не reset. В частности, поля формы сохраняют свое содержание.

Есть ли способ принудительного повторного рендеринга элемента, который также приведет к повторной визуализации подэлементов, как если бы страница только что загрузилась?

Ответ 1

Добавление элемента key к элементу заставляет элемент (и все его дочерние элементы) повторно отображаться при изменении этого ключа.

(я устанавливаю значение "ключ" просто метку времени, когда были отправлены начальные данные.)

render: function() {
  return (
    <div key={this.state.timestamp} className="Commissioning">
      ...

Ответ 2

Метод this.replaceState(this.getInitialState()) фактически не является reset детьми, которые являются входом, если это то, что вы ищете. Для тех, кто ищет только reset своих полей формы, существует стандартная функция DOM reset(), которая очищает все входы в данном элементе.

Итак, с помощью React это будет примерно так:

this.refs.someForm.getDOMNode().reset();

Doumentation:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

Ответ 3

Если это форма, которую вы хотите использовать reset, вы просто можете использовать этот

// assuming you've given {ref: 'form'} to your form element
React.findDOMNode(this.refs.form).reset();

Ответ 4

Хотя я лично не считаю, что в большинстве случаев вы должны хранить локальное промежуточное состояние компонента (например, вложенные окна ввода) в централизованном месте (например, в хранилище потоков), здесь это может иметь смысл, в зависимости от того, сколько у вас есть, тем более, что кажется, что входы уже имеют взаимодействие с сервером/проверку вокруг них. Нажатие этого состояния вверх по иерархии компонентов или в какое-то другое центральное место может помочь в этом.

Одна альтернативная идея с моей головы - использовать mixin в компонентах, которые могут нуждаться в локальном состоянии reset, и выполнять какое-то инициирование событий и т.д., чтобы это произошло. Например, вы можете использовать Node EventEmitter или такую библиотеку, как EventEmitter3 с таким микшированием (предупреждение: не проверено, возможно лучше всего это как псевдокод:)

var myEmitter = new EventEmitter(); // or whatever

var ResetStateMixin = {
  componentWillMount: function() {
    myEmitter.on("reset", this._resetState);
  },

  componentWillUnmount: function() {
    myEmitter.off("reset", this._resetState);
  },

  _resetState: function() {
    this.replaceState(this.getInitialState());
  },

  triggerReset: function() {
    myEmitter.emit("reset");
  }
};

Затем вы можете использовать его в таких компонентах:

React.createClass({
  mixins: [ResetStateMixin],

  getInitialState: function() {
    return { ... };
  },

  onResetEverything: function() {
    // Call this to reset every "resettable" component
    this.triggerReset();
  }
});

Это очень простая и довольно тяжелая работа (вы можете использовать только reset все компоненты, каждый компонент вызывает replaceState(this.getInitialState()) и т.д.), но эти проблемы можно решить, немного расширив mixin (например, имея несколько эмитентов событий, позволяя реализовать специфичные для компонента реализации resetState и т.д.).

Стоит отметить, что вам нужно использовать управляемые входные данные для этого; в то время как вам не нужно нажимать свое состояние на всю иерархию компонентов, вы все равно хотите, чтобы все ваши входы имели обработчики value и onChange (и т.д.).