Question

我正在尝试构建表单向导。我通过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>

Answer 1

赋予props函数的render是route props listed in the documentation。在这种情况下，您想要做的是从父组件传递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>
    );
  }
}

Answer 2

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

使用Formik构建向导时无法在子组件中使用道具

2 个答案: