道具不会传递给子组件 - redux-form / react

时间:2017-03-23 09:45:52

标签: reactjs redux-form

我的道具不会传递给子组件。我有以下父组件NewProject:

...

export class NewProject extends React.PureComponent {

  constructor(props) {
    super(props);
    this.saveProject = this.saveProject.bind(this);
  }

  saveProject = (values) => {
    console.log(values);
  }

  render() {
    return (
      <div>
        <div style={{fontSize: 14}} className="container">
          <NewProjectForm
            onSubmit={this.saveProject}
          />
        </div>
      </div>
    );
  }
}
...

子组件NewProjectForm

...
const NewProjectForm = (props) => {
  const {
    handleSubmit,
    pristine,
    reset,
    submitting,
    locale
  } = props;

  console.log(props);

  return (
      <form onSubmit={handleSubmit}>
            <RaisedButton labelColor='#ffffff' type="submit" backgroundColor='#86BFC4' label="Save" />
      </form>
    </Form>
  )
}

export default reduxForm({
  form: 'newProjectForm'
})(NewProjectForm);

当我按下提交按钮时,我收到以下错误:

Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop
    at checkSubmit (eval at ./node_modules/redux-form/lib/reduxForm.js (http://localhost:3000/main.js:5694:1), <anonymous>:133:11)
    at Form.submit (eval at ./node_modules/redux-form/lib/reduxForm.js (http://localhost:3000/main.js:5694:1), <anonymous>:540:74)
    at Object.ReactErrorUtils.invokeGuardedCallback (webpack:///./~/react-dom/lib/ReactErrorUtils.js?:70:16)

错误的发生是因为道具没有传下来,但为什么呢 - 我错过了什么?

这是console.log的输出...

enter image description here

2 个答案:

答案 0 :(得分:0)

您使用props发送onSubmit并尝试使用handleSubmit

  const {
    handleSubmit, // change to onSubmit
    pristine,
    reset,
    submitting,
    locale
  } = props;

答案 1 :(得分:0)

名称不匹配问题:

<NewProjectForm
    onSubmit={this.saveProject}
/>

您将其作为onSubmit传递并将其用作handleSubmit

const {
    handleSubmit, // change this to onSubmit
    pristine,
    reset,
    submitting,
    locale
  } = props;