使用React useState编辑其他输入字段时如何更新输入字段

2024-07-27 • 问答

共有3个数字输入字段：a，b和c。
当用户编辑“ a”或“ b”时，“ c”应计算为a * b。
编辑“ c”后，请查看哪个字段最近被编辑：
如果“ a”，则“ b” = c / a
如果“ b”则“ a” = c / b

以下工作代码允许编辑a，b和c。
如果编辑了c，我不知道如何实现计算a或b。

import React,{ useState } from 'react';

const Calc = () => {
  const [values,setvalues] = useState( { a: 3,b: 2,c: 6 });
  const handleChange = (e) => {
    const { name,value } = e.target;
    setvalues({ ...values,[name]: value });
  };
  return (
    <div>
      <div classname="row">
        <label htmlFor="a">a</label>
        <input type="number" id="a" name="a" onChange={handleChange} value={values.a} />
      </div>

      <div classname="row">
        <label htmlFor="b"> b </label>
        <input type="number" id="b" name="b" onChange={handleChange} value={values.b}  />
      </div>

      <div classname="row">
        <label htmlFor="c"> c </label>
        <input type="number" id="c" name="c" onChange={handleChange} value={values.c}  />
      </div>

    </div>
  );
};

要进行乘法运算，我将其添加到handleChange（）的末尾

 if (name === 'a') {
      setvalues({ ...values,a: value,c: value * values.b });
 }
 if (name === 'b') {
      setvalues({ ...values,b: value,c: value * values.a });
 }

但是我不知道在编辑“ c”时如何计算“ a”或“ b”，因为我需要根据这两个之间的最后一个编辑事件来决定需要计算哪个字段“ a”或“ b”

您应该创建一个内部状态来处理field was edited most recently，如下所示：

const [recentlyValue,setRecentlyValue] = useState("");
if (name === "a") {
    setRecentlyValue(name);
    setValues({ ...values,a: value,c: value * values.b });
}
if (name === "b") {
    setRecentlyValue(name);
    setValues({ ...values,b: value,c: value * values.a });
}
// check recentlyValue with case `c`
if (name === "c") {
    if (recentlyValue === "a") {
        // b = c/a
        setValues({ ...values,b: value / values.a,c: value });
    }
    if (recentlyValue === "b") {
        // a = c/b
        setValues({ ...values,a: value / values.b,c: value });
    }
    // Handle case not yet change a and b here,or don't do anything
}

My Demo

我建议您创建三个不同的函数并分别维护值的更新，而不是在一个函数中编写嵌套条件。这样，从长远来看，维护很容易。检查以下逻辑-

import React,{ useState } from 'react';

function App() {
  const [values,setValues] = useState( { a: 3,b: 2,c: 6 });
  const [lastChangedValue,setLastChangedValue] = useState("");

  const handleChangeA = (e) => {
    const { name,value } = e.target;
    setValues({ ...values,c: value * values.b });
    setLastChangedValue(name);
  }
  const handleChangeB = (e) => {
    const { name,c: value * values.a });
    setLastChangedValue(name);
  }
  const handleChangeC = (e) => {
    const { value } = e.target;
    if (lastChangedValue === 'a') {
      setValues({ ...values,c: value,b: value / values.a });
    }
    if (lastChangedValue === 'b') {
      setValues({ ...values,a: value / values.b });
    }
  }
  return (
    <div>
      <div className="row">
        <label htmlFor="a">a</label>
        <input type="number" id="a" name="a" onChange={handleChangeA} value={values.a} />
      </div>

      <div className="row">
        <label htmlFor="b"> b </label>
        <input type="number" id="b" name="b" onChange={handleChangeB} value={values.b}  />
      </div>

      <div className="row">
        <label htmlFor="c"> c </label>
        <input type="number" id="c" name="c" onChange={handleChangeC} value={values.c}  />
      </div>

    </div>
  );
}

export default App;

使用React useState编辑其他输入字段时如何更新输入字段

xiaomaxiaofeng 回答：使用React useState编辑其他输入字段时如何更新输入字段

大家都在问