如何确保React搜索表单提交时输入的+号不被编码为%2B

问题原因 #

• 你当前使用原生表单默认提交逻辑，提交时会自动按application/x-www-form-urlencoded规则编码表单内容，+属于规则内的特殊字符，会被编码为%2B，如果后端未做对应解码处理，就会出现符号展示异常。

解决方案 #

方案1：前端阻止默认提交，手动控制请求逻辑（推荐，可控性更高） #

修改提交逻辑，先阻止表单默认提交行为，自行构造跳转/请求参数，代码修改如下：

const [isSearchOpen, setSearchOpen] = useState(false),
    formRef = useRef(null);
useClickOutside(formRef, () => setSearchOpen(false));
const [inputText, setInputText] = useState("");
const handleSubmit = e => {
    // 第一步先阻止默认表单提交行为
    e.preventDefault();
    if (inputText.length >= 150) {
        alert('Maximum length 150 characters ')
        return;
    }
    // 手动构造搜索跳转，用encodeURIComponent保证编码规则统一
    window.location.href = `/search?filter=${encodeURIComponent(inputText)}`;
    // 如果是调用异步搜索接口，可按以下写法：
    // fetch(`/search?filter=${encodeURIComponent(inputText)}`)
    //   .then(res => res.json())
    //   .then(data => {
    //     // 处理搜索结果
    //   })
};


return (
    <form
        ref={formRef}
        className={cn("search-form", {
            "search-form--focus": isSearchOpen,
        })}
        onClick={() => setSearchOpen(true)}
        onKeyPress={() => setSearchOpen(true)}
        // 移除原有action属性，不走默认提交逻辑
        // eslint-disable-next-line
        role="searchbox"
        onSubmit={handleSubmit}
    >
        
        <input
            value={inputText}
            onChange={e => setInputText(e.target.value)}
            className="search-form__input"
            name="filter"
            type="text"
        
        />
      
        
        <button
            className="search-form__button"
            type="submit"
            aria-label="Header search button"
        />
    </form>
);

注意：必须使用encodeURIComponent处理参数，不要使用encodeURI，后者不会编码+号，提交后会被后端默认解析为空格。

方案2：后端适配解码逻辑 #

如果不需要修改前端代码，后端拿到filter参数后，先做一次URL解码即可还原+号，不同后端语言对应解码方法：

• Node.js：decodeURIComponent(获取到的filter参数)
• Java：URLDecoder.decode(获取到的filter参数, StandardCharsets.UTF_8.name())
• Python：urllib.parse.unquote(获取到的filter参数)

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