React：如何让搜索按钮的onClick同时执行搜索与页面跳转？

当然可行，你可以通过两种方式把两个操作合并到同一个按钮的onClick事件中：

方式一：内联函数直接调用两个方法 #

直接在按钮的onClick回调里依次执行搜索提交和路由跳转逻辑：

<button
    id="search-button"
    type="button"
    onClick={() => {
        props.onSubmit(innerSearch);
        routeChange();
    }} >
    Search
</button>

方式二：封装成单独的处理函数 #

如果后续逻辑有扩展需求，建议把操作封装成独立函数，让代码结构更清晰易维护：

function SearchBar(props) {
    const [innerSearch, setInnerSearch] = useState("");
    const navigate = useNavigate();

    const routeChange = () => {
        const path = `/Home`;
        navigate(path);
    };

    const handleSearch = () => {
        props.onSubmit(innerSearch);
        routeChange();
    };

    return (
        <div>
            <input
                aria-labelledby="search-button"
                name="search"
                id="search"
                type="search"
                value={innerSearch}
                onChange={e => setInnerSearch(e.target.value)}
            />
            <button
                id="search-button"
                type="button"
                onClick={handleSearch} >
                Search
            </button>
        </div>
    );
}

注意：useNavigate是React Router的Hook，必须在组件内部或自定义Hook中调用，所以要确保routeChange函数定义在SearchBar组件内部。

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