3

我正在尝试构建一个表单向导。我通过设置向导react-router并用于formik表单。现在我在创建可自定义的单选按钮时遇到了问题。我react-custom-radio为此使用了图书馆。

当我在路线之外使用单选按钮时，它可以正常工作（帖子底部的代码）。

当我与路由器一起使用时，道具会传递给子组件：

<Route path="/form/location" render={(props) => (<Pricing {...props} />)} />

在子组件内部，我以相同的方式访问道具，就像在父组件中所做的那样，它在那里工作。

const Pricing = (props) => {
  const {
    values,
    touched,
    errors,
    setFieldValue,
    setFieldTouched,
  } = props;
  return (
    <div>
        <MyRadio
          value={values.car}
          onChange={setFieldValue}
          onBlur={setFieldTouched}
          error={errors.car}
          touched={touched.car}
        />
    </div>
  );
}

但现在我总是得到错误Cannot read property 'car' of undefined。如果中间有路由器，为什么它不起作用？

如果我这样做，它会起作用：

  <Form>
    <Switch>
      <Redirect from="/" exact to="/form/location" />
       <Route path="/form/location" render={(props) => (<Pricing {...props} />)} />
    </Switch>
  <MyRadio
      value={values.car}
      onChange={setFieldValue}
      onBlur={setFieldTouched}
      error={errors.car}
      touched={touched.car}
    />
  </Form>
4

2 回答 2

2

props给render函数的是文档中列出的路由道具。在这种情况下，您要做的是props从父组件传递，而不是路由道具：

class ParentComponent extends React.Component {
  render() {
    const { props } = this;
    const {
      values,
      touched,
      errors,
      setFieldValue,
      setFieldTouched,
    } = props;
    return (
      <Form>
        <Switch>
          <Redirect from="/" exact to="/form/location" />
          <Route
            path="/form/location"
            render={() => <Pricing {...props} />}
          />
        </Switch>
        <MyRadio
          value={values.car}
          onChange={setFieldValue}
          onBlur={setFieldTouched}
          error={errors.car}
          touched={touched.car}
        />
      </Form>
    );
  }
}
于 2018-06-27T09:28:40.207 回答
1

如果你需要 Formik 的 props 和这个组件，你可以这样做： render={(formikProps) => <Pricing {...formikProps}, {...props} />} 这将从两个 props 中创建一长串属性以供 Pricing 使用。

于 2019-01-14T19:31:53.837 回答