javascript - 如何使用 React 在提交时重定向到带有 props 的新组件

Question

我是 React 和 Javascript 的新手。我有这个handleSubmit 函数，它在提交Formik 表单时成功返回了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。我尝试将重定向放在尝试之外，但我收到无效的钩子调用。我究竟做错了什么？

编辑：我的表单定义如下：

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>
)

标签： javascriptreactjsredirectroutingarguments

Answer 1

您所说的“args”是道具。在 React 中，props 从父组件传递到子组件。因此，您可以从呈现 FilteredReport 组件的任何组件传递它们，如下所示：

<Parent> 
<FilteredComponent id={whatever} severity={whatver}/>
</Parent>

如果您希望组件具有默认道具，您可以查看此链接有条件地设置默认道具，但请注意您通常不会在反应中执行此操作。相反，您应该考虑使用state。