history.推送表单提交

Question

我是一个反应的新手，在表单(在我的情况下是搜索栏(提交后(使用onSubmit事件(，我正试图在不同的组件集上路由。我用Router包住了我的搜索组件，并解构了历史。我试过使用onClick，推送确实会触发，但似乎对onSubmit没有任何作用。希望得到你的建议。

谢谢

搜索组件

const SearchAppBar = (props) => {
const {
history,
onPlatformDrop,
onPlatformChange,
onPriceRangeDrop,
clearPriceRange,
searchQuery,
setSearchQuery,
clearGenre,
onDropDownChange,
} = props;
return (
<Box sx={{ flexGrow: 1 }}>
<Search
sx={{
width: { xs: "85vw", md: "50vw", lg: "30vw" },
margin: "auto",
marginBottom: "20px",
}}
>
<form action="/" method="get" style={{ display: "flex" }}>
<StyledInputBase
defaultValue={searchQuery}
autoComplete="off"
placeholder="Search All Games…"
inputProps={{ "aria-label": "search" }}
type="search"
name="s"
id="site-search"
/>
<SearchIconWrapper>
<IconButton
type="submit"
onSubmit={(e) => {
history.push("/find");
clearGenre();
clearPriceRange();
onPlatformChange("");
onPlatformDrop("All Platforms");
onPriceRangeDrop("All Price Range");
onDropDownChange("All Genres");
setSearchQuery(e.target.value);
}}
>
<SearchIcon style={{ color: "#55597d" }} />
</IconButton>
</SearchIconWrapper>
</form>
</Search>
</Box>
);
};
export default withRouter(SearchAppBar);

然后在我的应用程序上，我有这样的东西：

<Route
path="/find"
exact
render={(props) => (
<div>
<Search
onPlatformChange={onPlatformChange}
onPlatformDrop={onPlatformDrop}
clearPriceRange={clearPriceRange}
onPriceRangeDrop={onPriceRangeDrop}
searchQuery={searchQuery}
setSearchQuery={setSearchQuery}
clearGenre={clearGenre}
onDropDownChange={onDropDownChange}
/>
</div>
)}
/>;

Answer 1

onSubmit处理程序应该在form元素上，而不是提交表单的按钮上。删除表单操作和方法。您还需要防止默认的表单操作发生，如果您不这样做，则提交表单并重新加载页面。

<form
style={{ display: "flex" }}
onSubmit={(e) => {       // handles form submission
e.preventDefault();    // prevents default form action
history.push("/find"); // navigate
...
setSearchQuery(e.target.s.value); // <-- access field value
}}
>
<StyledInputBase
...
name="s" // <-- access in submit handler
...
/>
<SearchIconWrapper>
<IconButton type="submit">
<SearchIcon style={{ color: "#55597d" }} />
</IconButton>
</SearchIconWrapper>
</form>