Изменить текст кнопки после всплывающего окна React и sweetalert2-реагировать - PullRequest
Новая
       9

Изменить текст кнопки после всплывающего окна React и sweetalert2-реагировать

0 голосов
/ 31 октября 2018

Я учусь реагировать и пытаюсь изменить текст кнопки после всплывающего окна sweetAlert2-реагировать. Исходный текст на кнопке «АКТИВНЫЙ» и Если я выберу OK во всплывающем окне, текст на кнопке должен быть «активирован», а если вы выберете «ОТМЕНА», «отключен» ..

Я не знаю, как и где делать итерацию IF любая помощь?

вот мой код: 

<button onClick={() => this.setState({ show: true })}>ACTIVE</button> <SweetAlert show={this.state.show} showCancelButton={this.state.show} title="Are you shore?" onConfirm={() => this.setState({ show: false })} />

Спасибо!

Ответы [ 2 ]

0 голосов
/ 31 октября 2018

Вы можете сохранить текст кнопки в состоянии (например: this.state.buttonText), тогда вы сможете установить buttonText, когда пользователь нажмет кнопку OK / Cancel.

Вы можете использовать общий метод (в приведенном ниже примере hideAlert) для управления обоими событиями (ок и отмена) и внутри него установить текст кнопки.

См. Следующий пример, пожалуйста ( нажмите здесь, чтобы запустить ): 

import React, { Component } from "react";
import SweetAlert from "react-bootstrap-sweetalert";
import ReactDOM from "react-dom";

export default class HelloWorld extends Component {
  constructor(props) {
    super(props);

    this.state = {
      alert: null,
      button: "active"
    };
  }

  showAlert() {
    const getAlert = () => (
      <SweetAlert
        show={this.state.show}
        showCancel
        onConfirm={() => this.hideAlert("disabled")}
        onCancel={() => this.hideAlert("active")}
      >
        Are you sure?
      </SweetAlert>
    );

    this.setState({
      alert: getAlert()
    });
  }

  hideAlert(text) {
    this.setState({
      alert: null,
      button: text
    });
  }

  render() {
    return (
      <div style={{ padding: "20px" }}>
        <button onClick={() => this.showAlert()}>
          {this.state.button}
        </button>
        {this.state.alert}
      </div>
    );
  }
}

ReactDOM.render(<HelloWorld />, document.getElementById("app"));

Надеюсь, это поможет вам, пока.

0 голосов
/ 31 октября 2018

Условно установить строку, внутреннюю для кнопки. 

<button>
    {this.state.active === 'active' && <div>ok</div>}
    {this.state.active === 'disabled' && <div>idk</div>}
<button>

Если существует только два состояния, рассмотрим троичный оператор. 

<button>
    {this.state.active === 'active' ? <div>ok</div> : <div>idk</div>}
<button>
...