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

【问题标题】：How to update the input field when other input field is edited using React useState使用 React useState 编辑其他输入字段时如何更新输入字段
【发布时间】：2019-11-06 03:42:49
【问题描述】：

有 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>
  );
};

为了计算“c”，我在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” .

【问题讨论】：

抱歉不明白你的问题。你能给出一些示例吗？例如：当设置 c = 5 时给定 {a:1, b:2, c:3}，然后 ....

标签： reactjs react-hooks

【解决方案1】：

您应该创建一个内部状态来处理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

【讨论】：

考虑 3 个差异函数 changeA、changeB、changeC 并避免如此多的 if 和嵌套。尽量避免长函数。

【解决方案2】：

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

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, a: value, c: value * values.b });
    setLastChangedValue(name);
  }
  const handleChangeB = (e) => {
    const { name, value } = e.target;
    setValues({ ...values, b: value, 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, c: value, 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;

【讨论】：