Сладкое предупреждение с компонентом, реагирующим на состояние?

askerovlab спросил: 28 марта 2018 в 04:40 в: javascript

SOLVED

Я использую слабую библиотеку предупреждений для пользовательских запросов (swal). Дело в том, что если вы хотите визуализировать реагирующий компонент, они просят вас отобразить его и предоставить узел, что создает для меня некоторые проблемы.

У меня есть список компонентов, которые были обработаны. У каждого компонента есть кнопка редактирования. Когда вы редактируете и нажимаете "ОК", появляются сладкие алисы, и в нем должны быть флажки, чтобы пользователь мог указать некоторые параметры.

Проблема заключается в следующем:

В первый раз я получаю значения по умолчанию true false. Но предположим, что: Пользователь отмечает все флажки, когда появляется swal, нажатие на нажатия, редактирование другой вещи. Открывайте всплывающие окна со всеми отмеченными флажками, но фактические данные являются значениями по умолчанию [true, false]. Я понимаю, почему это происходит, но я не могу понять, как это исправить.

Может кто-то объясните, как вы это сделаете в ответ? Мне также хотелось бы открыть каждый раз всплывающее окно со значениями по умолчанию или хранить фактические данные на основе состояния этого компонента.

Код:

class TimeAddOptions extends React.Component {
  state = {
    moveTime: true,
    deleteTime: false,
  };  changeMoveTime = (e: React.FormEvent<HTMLInputElement>) => {
    this.setState({
      moveTime: e.currentTarget.checked,
    });
    swal.setActionValue({
      confirm: { value: [e.currentTarget.checked, this.state.deleteTime] },
    });
  };  changeDeleteTime = (e: React.FormEvent<HTMLInputElement>) => {
    this.setState({
      deleteTime: e.currentTarget.checked,
    });
    swal.setActionValue({
      confirm: { value: [this.state.moveTime, e.currentTarget.checked] },
    });
  };  render(): JSX.Element {
    return (
      <div>
        <label>
          Add this task`s time to the new project
          <input
            type="checkbox"
            checked={this.state.moveTime}
            value={this.state.moveTime}
            onChange={this.changeMoveTime}
          />
        </label>
        <label>
          Subtract this task`s time from this project
          <input
            type="checkbox"
            checked={this.state.deleteTime}
            value={this.state.deleteTime}
            onChange={this.changeDeleteTime}
          />
        </label>
      </div>
    );
  }
}const wrapper = document.createElement('div');
ReactDOM.render(<TimeAddOptions />, wrapper);export default wrapper.firstChild; // and this is how I call swal
swal({
        text: "You changing project's task. Read the options",
        content: TimeAddOptionsNode,
        buttons: {
          confirm: {
            value: { value: [true, false] },
          },
        },
      }).then(value => {
        this.props.handleRename({
          moveTime: value.value[0],
          deleteTime: value.value[1],
        });      });

1 ответ

Есть решение
askerovlab ответил: 29 марта 2018 в 06:20

Я исправил это. То, что я сделал, настроил состояние в родительском компоненте и передал эту функцию изменения состояния и состояния в качестве подпорки компоненту, который вызывает swal, и также отслеживал значения флажков. Каждый раз, когда нажимается ОК, я бы изменил это состояние. Лучше взглянуть на код, кажется, я его плохо объяснил.

Ссылка на коды и поле как пример решения.