勾选复选框时设置文本输入值，取消勾选时恢复原值

问题描述 #

开发表单时遇到以下需求：

• 勾选复选框：禁用输入框并填入预定义文本P0000000
• 取消勾选：输入框恢复可编辑，并还原为勾选前的内容

目前已实现勾选时的禁用与预填功能，但取消勾选后输入框仍保留预定义值，仅变为可编辑状态，无法恢复原内容。

问题原因 #

React的setState是异步操作，原代码中直接使用当前的isDevSolution、values状态变量进行判断和更新，可能获取到的是未更新的旧值，导致恢复逻辑执行异常。

修正后的代码 #

const [values, setValues] = React.useState({} as any);
const [isDevSolution, setIsDevSolution] = React.useState(false);
const [originalNumber, setOriginalNumber] = React.useState('');

const handleCheckboxChange = () => {
  // 使用函数式更新获取最新的isDevSolution状态
  setIsDevSolution(prev => {
    const newState = !prev;
    if (newState) {
      // 勾选时：先存储当前输入框的值，再设置预定义文本
      setValues(prevValues => {
        setOriginalNumber(prevValues.number);
        return {...prevValues, number: 'P0000000'};
      });
    } else {
      // 取消勾选时：恢复存储的原内容
      setValues(prevValues => ({...prevValues, number: originalNumber}));
    }
    return newState;
  });
};

const handleInputChange = e => {
  const { name, value } = e.target;
  setValues(prevValues => ({
    ...prevValues,
    [name]: typeof value === 'string' ? value.replace(/ +(?= )/g, '').trimStart() : value
  }));
};

<Form>
  <Input
    type='text'
    onChange={handleInputChange}
    label='Number'
    name='number'
    value={values.number} // 初始值来自数据库
    disabled={isDevSolution}
  />
  <Controls.Checkbox
    onChange={handleCheckboxChange}
    label='Development Solution'
    checked={isDevSolution}
  />
</Form>

关键修正点 #

• 异步状态的正确获取：在setIsDevSolution和setValues中使用函数式更新，确保拿到最新的状态值，避免依赖旧的state变量导致逻辑错误。
• 复选框状态绑定修正：将复选框的value属性改为checked，这是React受控复选框的标准绑定方式。
• 原内容存储逻辑优化：勾选时通过prevValues.number获取输入框的最新值存入originalNumber，确保恢复时拿到的是勾选前的真实内容。

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