如何在点击反应 js 中的事件监听器之类的按钮之前显示输出？

如何解决如何在点击反应 js 中的事件监听器之类的按钮之前显示输出？

这里我想在点击计算按钮之前将输出显示给用户，但我不知道该怎么做。

我想我必须使用 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 究竟是什么，并对不同的字段使用不同的状态，而不仅仅是一个。