React 中输入未完成时禁用提交按钮功能失效如何正确实现？

问题根因 #

当前实现仅在输入完成触发onComplete回调时才更新codes状态，用户删除已填内容时没有对应的回调同步修改codes的值，导致codes始终保留上一次输入完成的6位字符串，提交按钮的禁用判断逻辑失效。

正确实现方式 #

1. 首先为InputCode组件增加onChange回调，每次输入内容发生变化（包括新增、删除字符）时，同步更新codes状态
2. 调整提交按钮的禁用判断逻辑，补充loading状态的判断，避免加载过程中用户重复提交

修正后的代码如下：

<div className="App">
  <InputCode
    length={6}
    label="Code Label"
    loading={loading}
    onChange={(currentCode) => setCodes(currentCode)}
    onComplete={(code) => {
      setCodes(code);
      setLoading(true);
      setTimeout(() => setLoading(false), 10000);
    }}
  />
  <br />
  <button disabled={!codes || codes.length < 6 || loading}>Submit</button>
</div>

更优实现方案 #

• 状态逻辑收敛：无需单独维护codes状态，可直接通过InputCode组件暴露的实时输入值、完成状态做判断，减少冗余状态维护成本
• 判断逻辑抽离：将提交按钮的禁用逻辑抽为独立计算变量，提升代码可读性，示例：

const isSubmitDisabled = !codes || codes.length < 6 || loading;
// 按钮直接使用
<button disabled={isSubmitDisabled}>Submit</button>

• 补充合法性校验：在禁用逻辑中增加输入内容的格式校验（比如仅允许数字、指定范围字符），避免用户输入非法内容时仍可提交
• 交互体验优化：loading状态为true时，同步禁用InputCode组件输入能力，避免加载过程中用户修改输入内容产生逻辑冲突

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