javascript - 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.sentAnswer
或this.setState({sent: true})
。我相信这就是事实,只是打错了。
推荐阅读
- java - Selenium Grid:通过 RemoteWebDriver 使用自定义浏览器位置
- r - 使用 Elements 找到 Xpath,但无法通过 rvest 读取/抓取
- c# - windows下如何在文件上设置小图标?
- android - 如何设置 Android Material-Design TextInputEditText Leading-Icon?
- git - Github 推送失败:RPC 失败;curl 55 OpenSSL SSL_write: SSL_ERROR_ZERO_RETURN, errno 10053
- python - TensorFlow 中的多输出层神经网络
- python - (Neo)vim python 支持和活动 virtualenv 冲突
- azure - 在 Azure 上部署时,应用程序见解中没有数据
- javascript - 我有错误'] 无效的配置对象。Webpack 已使用与 API 架构不匹配的配置对象进行初始化”
- mqtt - Nestjs - 远程服务中没有定义匹配的事件处理程序