我是React和Javascript的新手。我有一个handleSubmit函数，它在提交表单时成功地返回organizationId和severity的正确值。如何使用传递给FilteredReports组件的属性/参数路由或重定向到下面指定的路径？简而言之，我正在根据这些属性过滤项目列表。
export class Report extends Component<IProps, {}> {
public render() {
return (
<Formik
component={Form}
initialValues={{ organizationId: '', severity: '' }}
onSubmit={this.handleSubmit}
/>
)
}
private handleSubmit = async (
values: { organizationId: any, severity: any },
{ setSubmitting }: FormikActions<{ organizationId: any, severity: any}>,
) => {
const { onSubmit } = this.props
if (onSubmit !== undefined) {
try {
setSubmitting(true)
await onSubmit(values.organizationId, values.severity)
return <Redirect to={FILTERED_REPORT} component={FilteredReport({id: values.organizationId, severity: values.severity})} />
} finally {
setSubmitting(false)
}
}
}
}FilteredReports组件如下所示：
export const FilteredReport = ({ id, severity }: { id: string, severity: number }) =>
loadComponentData(GET_FILTERED_REPORT_ASSETS_AND_EVENTS, { id, severity }, (data) => (
<ReportScreen items={buildFilteredReportItems(data.reportOrganizations, data.facilities, data.lines, data.assets, data.events)} />
))值已定义，但由于某种原因，onSubmit未定义。还接收到onSubmit不是函数的typeError。我尝试将重定向放在try之外，但是我得到了一个无效的钩子调用。我做错了什么？
编辑:我的表单定义如下：
export const Form = ({
handleChange,
handleSubmit,
isSubmitting,
values,
}: FormikProps<{ organizationId: any, severity: any }>) => (
<form onSubmit={handleSubmit}>
<Box pt={4}>
<InputLabel htmlFor="organization-native-required">Organization</InputLabel>
<Select
native
value={values.organizationId}
onChange={handleChange('organizationId')}
name="organizationId"
inputProps={{
id: 'organization-native-required',
}}
>
<option value='-1'></option>
{getOrganizations()}
</Select>
</Box>
<Box pt={4}>
<InputLabel htmlFor="severity-native-required">Severity</InputLabel>
<Select
native
value={values.severity}
onChange={handleChange('severity')}
name="severity"
inputProps={{
id: 'severity-native-required',
}}
>
<option value='-1'></option>
<option value='0'>Suspect</option>
<option value='1'>Warning</option>
<option value='2'>Critical</option>
</Select>
</Box>
<Box pt={4}>
<Button
color="primary"
data-testid="submit-button"
disabled={isSubmitting}
type="submit"
variant="contained"
>
Filter
</Button>
</Box>
</form>
)转载请注明出处:http://www.fulida88.com/article/20230526/1728465.html