React中如何实现多输入框值合并后无需按键自动显示结果

问题原因 #

你当前的代码中，结果输入框的数值更新逻辑绑定在自身的onChange事件上，只有当你手动操作结果输入框时才会触发数值同步，前面三个输入框的内容变化不会主动触发结果更新。

解决方法 #

方案1（最优，无冗余状态）

不需要单独维护number状态，合并后的数值可以直接通过input状态实时计算得到，直接绑定到结果输入框的value属性即可。如果不需要用户修改结果，还可以给结果输入框加上readOnly属性避免误操作。
修改后的完整代码如下：

import { useState } from "react";

const TextInput = () => {
  const [input, setInput] = useState({
    one: "",
    two: "",
    three: ""
  });

  const handleChangeInput = (event) => {
    setInput((prevState) => ({
      ...prevState,
      [event.target.name]: event.target.value
    }));
  };

  const mergedNumber = Number(Object.values(input).join(""));
  return (
    <div>
      <input
        name="one"
        value={input.one}
        onChange={handleChangeInput}
        placeholder="Enter value"
      />
      <input
        name="two"
        value={input.two}
        onChange={handleChangeInput}
        placeholder="Enter value"
      />
      <input
        name="three"
        value={input.three}
        onChange={handleChangeInput}
        placeholder="Enter value"
      />
      <div className="rs">
        <label>Result:</label>
        <input
          value={mergedNumber}
          readOnly
          autoComplete="one-time-code"
        />
      </div>
    </div>
  );
};
export default TextInput;

方案2（保留结果输入框可编辑能力）

如果需要支持用户手动修改结果输入框的内容，可以保留number状态，同时新增useEffect监听前面三个输入框的状态变化，自动同步合并后的数值：

import { useState, useEffect } from "react";

const TextInput = () => {
  const [input, setInput] = useState({
    one: "",
    two: "",
    three: ""
  });
  const [number, setNumber] = useState("");

  const handleChangeInput = (event) => {
    setInput((prevState) => ({
      ...prevState,
      [event.target.name]: event.target.value
    }));
  };

  // 监听输入框变化自动更新结果
  useEffect(() => {
    setNumber(Number(Object.values(input).join("")));
  }, [input]);

  return (
    <div>
      <input
        name="one"
        value={input.one}
        onChange={handleChangeInput}
        placeholder="Enter value"
      />
      <input
        name="two"
        value={input.two}
        onChange={handleChangeInput}
        placeholder="Enter value"
      />
      <input
        name="three"
        value={input.three}
        onChange={handleChangeInput}
        placeholder="Enter value"
      />
      <div className="rs">
        <label>Result:</label>
        <input
          value={number}
          onChange={(e) => setNumber(e.target.value)}
          autoComplete="one-time-code"
        />
      </div>
    </div>
  );
};
export default TextInput;

内容的提问来源于stack exchange，提问作者Kim Duyên