Reactjs-我正在尝试处理弹出窗口中的事件,但是在事件执行后弹出窗口没有得到应有的呈现

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Reactjs-我正在尝试处理弹出窗口中的事件,但是在事件执行后弹出窗口没有得到应有的呈现相关的知识,希望对你有一定的参考价值。

我有一个函数,当用户单击reactjs应用程序的弹出窗口中的按钮时,就会调用该函数。

sendAnswer = () => {

      event.preventDefault();
      console.log(this.answer);
      const data = { answer: this.answer };
      const requestInfo = {
          method: 'POST',
          body: JSON.stringify(data),
          headers: new Headers({
              'Content-Type': 'application/json'
          }),
      };

      fetch('http://www.mocky.io/v2/5d920649310000d48110ccd7', requestInfo)
      .then(response => {
          if(response.ok) {
            console.log('ok')
            this.setState({sentAnswer: true})

              return response.json()
          }
          throw new Error("Erro ao enviar a resposta...");
      })
      .catch(e => {
          this.setState({ message: e.message });
      });
    }

我在render()中有此代码:

{!this.state.sent ? (
            <textarea type="text" id="form10" className="md-textarea form-control" rows="3" onChange={e => this.answer = e.target.value} placeholder="Insira a sua resposta aqui" />
                                ) : ( 
            <Alert color="primary" className="text-center"> Message was sent! </Alert>
                                )}  

但是,弹出窗口不会刷新。 sendAswer函数正在被调用并执行,但是我需要刷新弹出窗口并显示消息“消息已发送!”。执行后。

我该怎么做?

答案
this.setState({sentAnswer: true})

这是您正在更新的状态,但是您的条件基于!this.state.sent

将条件更改为!this.state.sentAnswerthis.setState({sent: true})。我相信这就是它,只是被打错了。

以上是关于Reactjs-我正在尝试处理弹出窗口中的事件,但是在事件执行后弹出窗口没有得到应有的呈现的主要内容,如果未能解决你的问题,请参考以下文章

WPF 弹出窗口捕获鼠标双击事件

Leaflet Popup 未注册点击事件

如何在 Qt 中的弹出窗口小部件上创建平滑的圆角

Android:弹出窗口:尝试完成输入事件,但输入事件接收器已被释放

如何在 ReactJS 中处理 div 上的 onKeyDown 事件

事件侦听器没有响应