- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在我问问题之前:是的,我确实阅读了有关此问题的所有其他文章,但我基本上只是陷入困境,不知道如何解决这个问题。
所以基本上我的渲染和 console.log 比我的 useState 更改慢了一步。视觉和功能上最大的问题是动态按钮无法正确启用/禁用。我的代码是:
import React, { useState, useEffect } from 'react';
import ApiCalls from "../../classes/apiCallsClass"
import useStyles from "./styles";
import { TextField, Select, Paper, Grid, MenuItem, Button } from '@material-ui/core';
import { withStyles } from "@material-ui/styles";
export default function TicketCreation() {
const [buttonDisabled, setButtonDisabled] = useState(true);
const [, setTick] = useState(0);
const classes = useStyles();
const [ticketname, setTicketName] = useState('');
const [description, setDescription] = useState('');
const [prio, setPrio] = useState('');
const [system, setSystem] = useState('');
const handleChangePrio = event => {
setPrio(event.target.value);
checkFormFilled();
};
const handleChangeDescription = event => {
setDescription(event.target.value);
checkFormFilled();
};
const handleChangeName = event => {
setTicketName(event.target.value);
checkFormFilled();
};
const handleChangeSystem = event => {
setSystem(event.target.value);
checkFormFilled();
};
const checkFormFilled = () => {
if (ticketname && description && prio && system) {
setButtonDisabled(false, function(){
setTick(tick => tick + 1);
});
} else{
setButtonDisabled(true, function(){
setTick(tick => tick + 1);
});
}
}
const handelButtonSubmit = event => {
if (ApiCalls.createTicket(ticketname, system, prio, description)) {
console.log("Created");
}
}
return (
<div className={classes.root}>
<Grid container spacing={3}>
<Grid item xs={4}>
<Paper className={classes.paper}>
<TextField id="standard-basic" value={ticketname} onChange={handleChangeName} label="Ticketname" fullWidth />
</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>
<Select value={system} onChange={handleChangeSystem} displayEmpty fullWidth className={classes.selectEmpty}>
<MenuItem value="" disabled>
System
</MenuItem>
<MenuItem value={1}>Radar</MenuItem>
<MenuItem value={2}>Missles</MenuItem>
<MenuItem value={3}>Toilet</MenuItem>
</Select>
</Paper>
</Grid>
<Grid item xs={4}>
<Paper className={classes.paper}>
<Select value={prio} onChange={handleChangePrio} displayEmpty fullWidth className={classes.selectEmpty}>
<MenuItem value="" disabled>
Priority
</MenuItem>
<MenuItem value={1}>Low</MenuItem>
<MenuItem value={2}>Medium</MenuItem>
<MenuItem value={3}>High</MenuItem>
</Select>
</Paper>
</Grid>
<Grid item xs={12}>
<Paper className={classes.paper}>
<TextField
value={description}
onChange={handleChangeDescription}
id="outlined-multiline-static"
label="Ticket description"
multiline
rows="4"
variant="outlined"
fullWidth />
</Paper>
</Grid>
<Grid item xs={12}>
<Button disabled={buttonDisabled} onClick={handelButtonSubmit} variant="contained" color="primary">
Create
</Button>
</Grid>
</Grid>
</div>
);
}
不要介意 setTick usestate,我尝试将此与回调结合起来解决问题,但它不起作用。
我的问题基本上是:我需要做什么才能立即启用按钮? (也许我做错了其他事情?第一次使用 react 钩子(Hook))
最佳答案
状态 setter (setSystem 等)是异步的。这意味着您正在执行诸如 setSystem(event.target.value); 之类的操作checkFormFilled()
——在这种情况下,系统的新值可能不会在 checkFormFilled 运行时更新。这可能就是您看到事物“落后于”值的原因。
您应该做的不是在设置状态调用后直接调用 checkFormFilled ;相反,将 checkFormFilled 放入依赖于表单元素的 useEffect
Hook 中。这样,当这些值中的任何一个实际更新时,React 将调用您的 checkFormFilled 函数。
useEffect(() => {
checkFormFilled();
}, [ticketname, description, prio, system]);
然后,您的更改处理程序只需担心设置值,而不是调用表单填充检查,并且所有内容都保证是最新的。
关于javascript - React hook console.log 和界面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59416725/
我是一家小型非营利组织的技术总监,我们正在制作一个新网站。我们提出了几个不同主页设计的模型,需要接收董事会成员的意见。是否有在线应用程序/程序/框架可以接收和组织用户评论?我正在寻找允许在查看页面时发
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 4年前关闭。 Improve thi
我阅读了很多关于 java 接口(interface)的文章。我知道你可以实现多态性和其他伟大的东西(函数指针等)。我有理论知识,但有一点点或什至没有。我一直在使用很多已经制作好的界面,比如“Runn
已关闭。此问题旨在寻求有关书籍、工具、软件库等的建议。不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以
我正在尝试在 Windows 7 上编写一个 python 脚本来与我的 Wacom Bamboo Pen 数位板交互。 Wacom 建议使用 WinTab API,它工作正常,但不适用于我的应用程序
我正在研究一种远程访问有关 Linux 服务器统计信息的方法,即 conky会显示。 有没有办法与 conky 交互并获取它显示的统计信息?如果没有,您能否推荐一种获取此类统计数据的好方法? (C/C
将所有这些代码包装在 UI: do { } block 中的原因是什么?我在哪里可以获得关于它的明确说明? UI: do { backgroundButton.setImage(UIImage
我需要将 R 连接到某些 C# 应用程序。我安装了 rscproxy_1.3 和 R_Scilab_DCOM3.0-1B5 添加了对 STATCONNECTORCLNTLib、StatConnecto
我正在尝试遍历接口(interface)片段以通过 id 查找我的特定结构并更改属性。 type A struct { ID ID Steps []Step } type Ste
我有两种不同格式的相同界面,一种是键由低破折号分隔的 JSON 格式,另一种是 javascript camelCase 格式: JSON 格式: interface MyJsonInterface
操作系统:Linux。 我正在尝试寻找可能的方法来为我的嵌入式系统实现 Web 界面。 目前有一个外壳(基于文本)和一小组命令用于查询设备。 我是网络开发新手,我的问题是: 我必须使用什么网络服务器?
我正在尝试运行基于 Mechanical Turk Qualtrics 的调查,并且需要一些似乎可以通过 Mechanical Turk API 使用的功能,例如 custom Qualificati
我见过漂亮的 MetroTwit 界面 http://www.metrotwit.com/ ;我想知道使用了哪些 WPF 组件来尝试重现它。 最佳答案 MetroTwit 设计师在这里:) 所有的控件
我有一个小问题。我需要将 Hadoop Web 界面与我们的 Web 应用程序集成。我只需要一个 Hadoop 接口(interface),我们可以在其中运行一些 hadoop 命令,例如 1
假设我有这个 JavaScript 函数: function updateMainBuff(buff) { // do some stuff } 我的
我试图找出一个窗口是否属于当前的虚拟桌面。 我从 winapi 中找到了 VirtualDesktopManager 类,但即使根据 here 它应该位于“shobjidl.h” header 中,当
关闭。这个问题是opinion-based .它目前不接受答案。 想改进这个问题?更新问题,以便 editing this post 提供事实和引用来回答它. 8年前关闭。 Improve this
我的 Tkinter GUI 界面有问题。文本不会在 shell 中打印,但如果将 Entry 放置在第一个 tk 窗口 get() 中,它就可以工作...帮助我吗? 这是我的代码: import o
我有一个在 MATLAB 中实现的随机微分方程组。只有 4 个变量与 Euler-Maruyama 集成,所以没有什么太花哨的......不过,技术细节对于这个问题并不重要。 您建议我如何构建一个 W
对于我创建的插件,我想添加一个网络界面,您可以从中更改设置并执行一些简单的数据操作。此数据操作应通过 sqlquerys 完成。我正在使用 sqlite 数据库,这就是问题开始的地方: 网站(serv
我是一名优秀的程序员,十分优秀!