关闭表单提交的弹出窗口并在 reactjs 的父组件上显示 success/error 消息

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

是的，实际上你想要的是通过模态传递给你的父组件的成功消息 closed.You 可以做这样的事情

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
 });
 }

是你想要的吗？

关闭表单提交的弹出窗口并在 reactjs 的父组件上显示 success/error 消息

Close popup on form submit and display success/error message on parent component in reactjs

modalpopup

reactjs