如何在单击反应js中的js的eventlistener之类的按钮之前显示输出？

Posted 2023-02-22

【中文标题】如何在单击反应js中的js的eventlistener之类的按钮之前显示输出？

【英文标题】：how to show output before clicking the button like eventlistener of js in react js?

【发布时间】：2021-09-15 02:49:34

【问题描述】：

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

我想我必须使用 useEffect 来打印输出，但我不知道怎么做。

我从这里删除了 calculateF() 和 calculateP() 函数，因为它增加了行数。要查看整个代码，请访问沙盒链接。

请帮忙。My code sandbox Link

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, n, 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>
  );

谢谢你的建议

【参考方案1】：

您想在用户单击按钮之前显示输出，对吧？

这样做的一种方法是更新您的handleChange 函数。您可以检查两个值是否都存在于状态中（检查if 很重要，否则您会遇到问题）。如果存在值，那么您可以更新与该字段对应的状态。

我建议使用描述性变量名称，了解 f 或 p 的真正含义，并为不同的字段使用不同的状态，而不仅仅是一个。

【讨论】：

能否分享一下代码沙箱链接，对你有很大帮助。谢谢

你能分享一下，f、p和其他变量是什么，你想达到什么目的？

这是一个简单的计算器，我必须解决 F = P (1+i)^N ，I 和 N 是必填字段，这意味着用户必须输入其值，F 和 P 是可选的，其中用户必须输入任何值才能获得其他值作为输出