Закрыть всплывающее окно при отправке формы и отобразить сообщение об успехе / ошибке в родительском компоненте в activjs

Question

Я открываю форму для добавления пользователя во всплывающем окне, используя метод переключения. Я хочу закрыть переключатель в случае успеха и отобразить сообщение в родительском компоненте.

This is my toggle method
`````````````````````````````  
 toggle = () => {
  this.setState({
  modal: !this.state.modal
 });
 }

  <Modals title={'Add User'} isOpen={this.state.modal} toggle= 
   {this.toggle} />

   This is the method written in modal popup
   addApi = (data) => {
    axios.post(`http://***************/api/adduser`,data) //api call
    .then(res => {
    this.setState({
      successMsg : 'Record Added Successfully'
    })
    this.props.toggle(); // to close pop up. Is it right?
  })

   In my parent component:
  let {successMsg}=this.state;
     {successMsg ? successMsg : ''}

 ````````````````````````````````````````````````````

Как правильно закрыть всплывающее окно и отобразить сообщение об успехе в родительском компоненте?

Answer 1

Да, на самом деле вы хотите, чтобы сообщение об успехе передавалось вашему родительскому компоненту с закрытым модальным. Вы можете сделать что-то вроде этого

addApi = (data) => {
        axios.post(`http://***************/api/adduser`,data) //api call
        .then(res => {
        this.setState({
          successMsg : 'Record Added Successfully'
        })
        this.props.toggle({
          successMsg : 'Record Added Successfully'
        }); // to close pop up. Is it right?
    //now your parent component will get successMsg in an object, you can use it whereever you want

      })

В родительском компоненте вы можете добавить что-то вроде этого:

toggle = (data) => {
  this.setState({
  modal: !this.state.modal,
  successMsg: data.successMsg
 });
 }

Это то, что вы хотели?