一个onClick的多个参数?

Question

下面是我的搜索栏。当我按下"搜索"按钮时，我希望它更新结果，但也重定向到另一个页面。

function SearchBar(props) { 
  const [innerSearch, setInnerSearch] = useState(""); 
  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={() => props.onSubmit(innerSearch)} >
        Search 
      </button> 
    </div> 
  ); 
} 
}; 

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

我想把这个routeChange放在同一个按钮下面，同时它也会搜索是否可能。

onClick={routeChange}

Answer 1

您的onClick()函数需要调用"包装器";功能，包含您的onSubmit()prop功能和路由更改功能。

例如:

let navigate = useNavigate(); 
const routeChange = () =>{ 
let path = `/Home`; 
navigate(path);
}
const wrapperFunction = () => {
routeChange();
props.onSubmit(innerSearch)
}

onClick={wrapperFunction}