问题描述
这里我想在点击计算按钮之前将输出显示给用户,但我不知道该怎么做。
我想我必须使用 useEffect 来打印输出,但我不知道如何。
我从这里删除了 calculateF() 和 calculateP() 函数,因为它增加了行数。要查看整个代码,请访问沙箱链接。
export default function Simpletooltips() {
const [f,setF] = useState("");
const [i,setI] = useState("");
const [n,setN] = useState("");
const [p,setP] = useState("");
const handleInputChange = (e) => {
const { name,value } = e.target;
switch (name) {
case "f":
setF(value);
break;
case "i":
setI(value);
break;
case "n":
setN(value);
break;
case "p":
setP(value);
break;
default:
break;
}
};
const resetForm = () => {
setF("");
setI("");
setN("");
setP("");
};
const handleSubmit = (e) => {
e.preventDefault();
if (f === "") {
setF(calculateF(i,n,p));
} else if (p === "") {
setP(calculateP(i,f));
}
};
return (
<form autoComplete="off" onSubmit={handleSubmit}>
<TextField
type="number"
variant="outlined"
label="F"
name="f"
value={f}
onChange={handleInputChange}
fullWidth
/>
<TextField
type="number"
variant="outlined"
label="i"
name="i"
value={i}
onChange={handleInputChange}
fullWidth
required
/>
<TextField
type="number"
variant="outlined"
label="N"
name="n"
value={n}
onChange={handleInputChange}
fullWidth
required
/>
<TextField
type="number"
variant="outlined"
label="P"
name="p"
value={p}
onChange={handleInputChange}
fullWidth
/>
<br />
<Button variant="contained" fullWidth type="submit" color="primary">
Calculate
</Button>
<Button
variant="contained"
fullWidth
color="default"
onClick={resetForm}
>
Clear
</Button>
</form>
);
}
谢谢你的广告
解决方法
您想在用户单击按钮之前不显示输出,对吗?
这样做的一种方法是更新您的 handleChange
函数。您可以检查状态中是否存在这两个值(检查 if
很重要,否则您会遇到问题)。如果存在值,则您可以更新与该字段对应的状态。
我建议使用描述性变量名称,至于 f
或 p
究竟是什么,并对不同的字段使用不同的状态,而不仅仅是一个。