React表单onSubmit绑定函数未执行 无法实现自定义路径跳转怎么办

问题原因 #

• 未阻止表单默认提交行为：浏览器对form标签的默认提交逻辑就是刷新页面、将表单内的输入字段作为GET参数拼接在URL后，这是你当前出现?query=Mike的直接原因。
• onSubmit事件绑定错误：你写的onSubmit={(e) => e.handleSubmit()}是尝试从原生事件对象e上调用handleSubmit方法，而该方法是你在组件内自定义的，不是事件对象的属性，所以自定义提交逻辑永远不会触发。
• useState初始值类型不匹配：你将存储输入字符串的query初始值设为了空数组[]，虽然后续赋值字符串不会直接崩溃，但属于不必要的类型错误，建议改为空字符串''。
• React组件命名不规范：自定义组件首字母必须大写，否则React会将其识别为原生HTML标签，引发潜在问题。

修复后的代码（适配React Router v5及以下版本） #

import { useState } from 'react';

// 组件名首字母改为大写
function Search({ history }) {
  // 初始值改为空字符串
  const [query, setQuery] = useState('');

  const handleSubmit = (e) => {
    // 阻止表单默认提交行为
    e.preventDefault();
    // 增加非空判断避免跳转到空路径
    if (query.trim()) {
      history.push(`/${query.trim()}`);
    }
  };

  // 去掉不必要的高阶函数封装，直接处理输入事件
  const handleChange = (e) => {
    setQuery(e.target.value);
  };

  return (
    <>
      <form
        {/* 直接绑定自定义的handleSubmit方法 */}
        onSubmit={handleSubmit}
        className=""
      >
        <div className="">
          <span className="">
            <i className="fas fa-search"></i>
          </span>
          <input
            onChange={handleChange}
            type="text"
            name="query"
            className=""
          />
        </div>
        <button type="submit">Search</button>
      </form>
    </>
  );
}

适配React Router v6+版本说明 #

如果你使用的是v6及以上版本的React Router，已经不存在history属性，需要替换为useNavigate钩子：

import { useState } from 'react';
import { useNavigate } from 'react-router-dom';

function Search() {
  const [query, setQuery] = useState('');
  // 调用useNavigate钩子获取跳转方法
  const navigate = useNavigate();

  const handleSubmit = (e) => {
    e.preventDefault();
    if (query.trim()) {
      navigate(`/${query.trim()}`);
    }
  };

  // 其余代码和上面修复版一致
}

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