0
import React, { Component } from 'react';

class Modal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            discount: this.props.discount,
            discountType: this.props.discountType,
        };
        this.onSubmit = this.onSubmit.bind(this);
        this.onChange = this.onChange.bind(this);
        this.onSelected = this.onSelected.bind(this);
    }

onSubmit(event) {
    event.preventDefault();
    this.props.changeDiscount(this.props.priceId, this.state.discount, this.state.discountType);
}

onChange(event) {
    this.setState({
        discount: event.target.value,
        discountType: this.state.discountType
    });
}

onSelected(event) {
    this.setState({
        discount: this.state.discount,
        discountType: event.target.value
    });
}

render() {
    return (
        <React.Fragment>
            <div className="modal fade discount-modal-specification" id="discountModal">
                <div className="modal-dialog" role="document">
                    <form onSubmit={this.onSubmit} className="form form-horizontal modal-content" autocomplete="off">
                        <div className="modal-header">
                            <h4 className="modal-title">Скидка</h4>
                            <button type="button" className="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div className="modal-body">
                            <div>
                                <div className="form-group discount-form-group">
                                    <div className="input-group">
                                        <input className="form-control" onChange={this.onChange} value={this.props.discount}/>
                                        <div className="input-group-append">
                                            <select onChange={this.onSelected} className="discount-type">
                                                <option selected={this.props.discountType === 'percentage'} value="percentage">%</option>
                                                <option selected={this.props.discountType === 'value'} value="value">руб.</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-default btn-cancel" data-dismiss="modal">Отмена</button>
                            <button type="button" className="btn btn-default btn-delete">&nbsp;</button>
                            <button type="submit" className="btn btn-default btn-ok">&nbsp;</button>
                        </div>
                    </form>
                </div>
            </div>
        </React.Fragment>
    );
}
}

    export default Modal;

Начал изучать react js и столкнулся с проблемой закрытия модального окна после submit формы. Может кто-то может подсказать как это можно реализовать?

1 ответ 1

0

Предложу простое решение в виде хранения состояния окна в стейте. Для начала в конструкторе объявим поле:

constructor(props) {
  this.state = {
    showModal: true, // доплните свой стейт этим значнием
  }
}

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

onSubmit(event) {
    event.preventDefault();
    this.props.changeDiscount(this.props.priceId, this.state.discount, this.state.discountType);
    this.setState({ showModal: false }); // поменяли значеине
}

Всё просто, после отправки формы - меняем значние в стейте. Далее метод рендеринга, туда добавим условие:

render() {
  // проверка условия отображения
  if (!this.state.showModal) { 
     return <p>Modal was hide...</p>
  }

  return (
     <React.Fragment>
       // тут код вашей модалки
     </React.Fragment>
  )

Вот так, простым способом скрыть модалку после клика. Своего рода хак рендеринга с добавлением условия. Полезная ссылка, связанная с вашим вопросом: Conditional Rendering

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.