Question

我正在打开一个表单，使用toggle方法在弹出窗口中添加用户。我想关闭成功切换，并在父组件中显示一条消息。

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

是您想要的吗？

关闭表单提交上的弹出窗口，并在reactjs中的父组件上显示成功/错误消息

1 个答案: