React中两个Textfield输入框互斥自动设0的实现方法

核心是把两个TextField设为React受控组件，通过onChange处理值联动逻辑，keypress事件可用来限制输入类型（比如只允许输入数字），避免无效值触发联动。

核心逻辑说明 #

• 用state统一管理两个输入框的取值，初始值都设为null
• 给两个输入框分别绑定onChange事件：触发时先更新当前输入框的值，若当前输入值不为空，直接把另一个输入框的值设为0
• 绑定keypress事件：输入前就拦截非法字符，比在onChange里二次校验更友好，不会出现非法字符闪消的问题

完整代码示例 #

import { useState } from 'react';
import TextField from '@mui/material/TextField'; // 若使用其他组件库/原生input，逻辑完全通用

function DualInputDemo() {
  // 统一托管两个输入框的状态
  const [inputState, setInputState] = useState({
    a: null,
    b: null
  });

  // keypress事件：限制仅可输入数字，可根据业务需求调整校验规则
  const handleKeyPress = (e) => {
    const numberReg = /^[0-9]*$/;
    if (!numberReg.test(e.key)) {
      e.preventDefault();
    }
  };

  // onChange事件：处理输入值联动
  const handleInputChange = (field) => (e) => {
    const currentInput = e.target.value.trim() === '' ? null : Number(e.target.value);
    const newState = { ...inputState, [field]: currentInput };
    // 触发联动逻辑：当前输入框有值时，另一输入框自动赋值为0
    if (currentInput !== null) {
      newState[field === 'a' ? 'b' : 'a'] = 0;
    }
    setInputState(newState);
  };

  return (
    <div style={{ display: 'flex', gap: '16px' }}>
      <TextField
        label="A"
        value={inputState.a ?? ''}
        onChange={handleInputChange('a')}
        onKeyPress={handleKeyPress}
        type="number"
      />
      <TextField
        label="B"
        value={inputState.b ?? ''}
        onChange={handleInputChange('b')}
        onKeyPress={handleKeyPress}
        type="number"
      />
    </div>
  );
}

export default DualInputDemo;

扩展说明 #

• 代码已兼容空值重置逻辑：当用户把当前输入框的内容全部清空时，两个输入框都会回到初始空值状态，不会触发强制设0的逻辑
• 如果不需要限制输入类型，直接删除onKeyPress绑定即可，联动逻辑不受影响
• 若业务要求其中一个输入框设为0后不可手动修改，只需给对应输入框加disabled={inputState[field] === 0}属性即可

内容的提问来源于stack exchange，提问作者user 1017