React双输入框联动实现问询：保持input2 - input1 = 1

下面是一个简洁的函数组件实现，核心思路是通过受控组件绑定状态，在任一输入框值变化时自动计算并更新另一个输入框的值，确保始终满足 input2 - input1 = 1：

import { useState } from 'react';

function LinkedInputs() {
  // 初始化状态，天然满足input2 - input1 = 1
  const [input1, setInput1] = useState(0);
  const [input2, setInput2] = useState(1);

  // 处理input1的输入变化
  const handleInput1Change = (e) => {
    const value = Number(e.target.value);
    // 处理非数字输入，默认设为0
    const validValue = isNaN(value) ? 0 : value;
    setInput1(validValue);
    // 自动计算并同步input2的值
    setInput2(validValue + 1);
  };

  // 处理input2的输入变化
  const handleInput2Change = (e) => {
    const value = Number(e.target.value);
    const validValue = isNaN(value) ? 1 : value;
    setInput2(validValue);
    // 自动计算并同步input1的值
    setInput1(validValue - 1);
  };

  return (
    <div>
      <input
        type="number"
        value={input1}
        onChange={handleInput1Change}
        placeholder="Input 1"
      />
      <input
        type="number"
        value={input2}
        onChange={handleInput2Change}
        placeholder="Input 2"
      />
    </div>
  );
}

export default LinkedInputs;

关键逻辑说明 #

• 使用useState维护两个输入框的状态，初始值设置为0和1，直接满足差值要求。
• 每个输入框绑定独立的onChange处理函数：
  • 修改input1时，先将输入值转为有效数字（处理非数字输入的异常情况），再同步更新input2为input1 + 1。
  • 修改input2时，同理更新自身状态后，同步计算input1 = input2 - 1并更新。
• 输入框设置type="number"，既限制输入类型，也优化数字输入的交互体验。

如果需要支持空输入场景，可以调整非数字输入的处理逻辑，比如将空字符串转为0，或者保留空值（此时需额外处理差值逻辑，比如空值时另一个输入框也置空），可根据实际需求灵活调整。

内容的提问来源于stack exchange，提问作者Sudhansu Sekhar Pati