React Hook实现输入框正则清洗后实时更新值的问题

问题出在输入框的受控/非受控设置上，直接按以下步骤修改即可：

1. 切换为受控组件 #

把defaultValue={url}改成value={url}，因为defaultValue只会在组件初始化时生效，后续状态更新不会同步到输入框；而value={url}是受控组件的标准写法，输入框的值完全由状态url驱动。

2. 简化字符清洗逻辑 #

原来的全匹配校验没必要提前做，直接清洗非法字符后对比原输入值，不一致就提示用户，然后更新状态。这样不管输入什么，输入框都会实时同步清洗后的结果。

修改后的完整代码：

import { useState } from 'react';
// 假设Input是你使用的UI组件库组件

function YourComponent() {
  const [domain, setDomain] = useState("http://example.com/");
  const [url, setUrl] = useState("");

  function handleSetUrl(inputValue) {
    // 直接清洗非法字符
    const cleanedValue = inputValue.replace(/[^A-Za-z0-9-_]/g, '');
    // 如果原输入和清洗后的值不一致，说明有违规字符，提示用户
    if (inputValue !== cleanedValue) {
      console.log("你的URL只能包含数字、字母、连字符和下划线。");
    }
    // 更新状态，输入框会自动同步这个值
    setUrl(cleanedValue);
  }

  return (
    <div>
      <p>{domain}{url}</p>
      <Input
        label="Page URL"
        inputProps={{type: "text"}}
        value={url}
        onChange={(e) => handleSetUrl(e.target.value)}
      />
    </div>
  );
}

export default YourComponent;

补充说明 #

• 之前用value={url}觉得无法编辑，大概率是因为输入违规字符后立刻被清除，看起来像无法输入，但这是正常的校验逻辑——用户输入非法字符时，输入框会自动回退到合法状态，同时给出提示。
• 受控组件的核心逻辑是：输入框的值由状态控制，onChange事件触发状态更新，状态更新后输入框自动刷新显示最新值。

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