admin 管理员组

文章数量: 1086864

I want to invoke something like a function call inside of a response so that I can open up a modal. I'm using material ui for the modal.

Modal

The flow goes with something like

  1. Click on a button
  2. Send request
  3. Get response and display message in Modal.

The modal exists as a separate ponent so i cannot do


.then( e => {
        <Modal />
       })

Tried including the modal hook in the same file but doesn't work like that.

axios
      .post(`${url}`, {
        email: email
      })
      .then(res => {
        if (res.data.type === "account not found") {
          <WarningModal />
        } else if (res.data.type === "email sent") {
          <SuccessModal />
        }
      });

Just want to invoke modal ponents on receiving response.

I want to invoke something like a function call inside of a response so that I can open up a modal. I'm using material ui for the modal.

Modal

The flow goes with something like

  1. Click on a button
  2. Send request
  3. Get response and display message in Modal.

The modal exists as a separate ponent so i cannot do


.then( e => {
        <Modal />
       })

Tried including the modal hook in the same file but doesn't work like that.

axios
      .post(`${url}`, {
        email: email
      })
      .then(res => {
        if (res.data.type === "account not found") {
          <WarningModal />
        } else if (res.data.type === "email sent") {
          <SuccessModal />
        }
      });

Just want to invoke modal ponents on receiving response.

  • javascript
  • reactjs
  • material-ui
Share Improve this question asked Nov 7, 2019 at 9:52 SiddhutSiddhut 3772 gold badges7 silver badges17 bronze badges 3
  • You are making this request inside your react ponent ? – ibtsam Commented Nov 7, 2019 at 9:56
  • Define model inside render function based on boolean value which will be handled in response of api call. – akhtarvahid Commented Nov 7, 2019 at 9:56
  • It's not clear where your axios request code is placed in your ponent. In any case, put it inside a function outside of your render. Call the function onClick. Then, instead of putting <WarningModal /> etc inside your axios, change a state variable (for example this.state.showWarningModal which is true or false. Same for SuccessModal. Then in your render, render the modal when the corresponding state variable is true – Chris Commented Nov 7, 2019 at 9:57
Add a ment  | 

3 Answers 3

Reset to default 2

As you may have noticed, the Modal ponent from material-ui takes an open prop indicating whether the modal is open or not.

So what you have to do is to put the modal somewhere in your JSX with the open prop set to a boolean value ing from your ponent's state. And when you receive the response from your HTTP call, you toggle this boolean to true, and the modal will appear.

Add 2 state variable for both modals and set them true in the axios call, also add the modal to the return.

const test = () => {
    const [showSuccessModal, setShowSuccessModal] = useState(false)
    const [showWarningModal, setShowWarningModal] = useState(false)


    axios
      .post(`${url}`, {
        email: email
      })
      .then(res => {
        if (res.data.type === "account not found") {
          setShowWarningModal(true)
        } else if (res.data.type === "email sent") {
            setShowSuccessModal(true)
        }
      });

    return (
        <div>
            <WarningModal open={showWarningModal}/>
            <SuccessModal open={showSuccessModal} />
        </div>
    )

}

What you want to do is this:

  1. Add your Modal ponent to your ponent's render function. Like so:
  2. Hook the open prop of the Modal ponent to a state, call it openModal. Now you have this.state.openModal.
  3. On request response, do a this.setState({openModal: true})
  4. The modal should now be opening.

You should have something like this:

render() => {
       return (
          ...
          <Modal open={this.state.openModal}/>
       )
    }

本文标签： javascriptHow to invoke a modal on function response in ReactStack Overflow

版权声明：本文标题：javascript - How to invoke a modal on function response in React? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1744006568a2517397.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。