将带有预定义参数的函数传递给 React 中的 handleSubmit

Pass a function with predefined parameter to handleSubmit in React

我在组件“MyEditDataForm”中有一个 redux-form,我正在传递一个函数来处理提交给它,如下所示:

const myHandleSubmit = ({ firstInputFieldName, secondInputFieldName }) => {
  console.log(firstInputFieldName);
  console.log(secondInputFieldName);
};

const EditDataPage = () => {
  return (
    <Container>
      <Row>
        <MyEditDataForm
          onSubmit={myHandleSubmit}
        />
      </Row>
    </Container>
  );
};

控制台输出:“john”、“doe”

到目前为止一切顺利...现在我想向 myHandleSubmit 添加一个参数,我想将其传递给 myHandleSubmit。像这样:

const myHandleSubmit = ({ firstInputFieldName, secondInputFieldName, anotherParameter }) => {
  console.log(firstInputFieldName);
  console.log(secondInputFieldName);
  console.log(anotherParameter);
};

const EditDataPage = () => {
  const aNewParameter = "some info";

  return (
    <Container>
      <Row>
        <MyEditDataForm
          onSubmit={myHandleSubmit({ anotherParameter: aNewParameter })}
        />
      </Row>
    </Container>
  );
};

点击提交按钮前的输出:undefined, undefined, "some info"

单击按钮后:“错误:您必须将 handleSubmit() 传递给 onSubmit 函数或将 onSubmit 作为道具传递”

如何在不破坏表单提交功能的情况下将新参数传递给 myHandleSubmit?我试图用 bind():

做到这一点
<MyEditDataForm
  onSubmit={myHandleSubmit.bind({ anotherParameter: aNewParameter })}
/>

输出:“john”、“doe”、undefined

我做错了什么?

您可能需要这个:

const myHandleSubmit = ({ firstInputFieldName, secondInputFieldName, anotherParameter }) => {
  console.log(firstInputFieldName);
  console.log(secondInputFieldName);
  console.log(anotherParameter);
};

const EditDataPage = () => {
  const aNewParameter = "some info";

  return (
    <Container>
      <Row>
        <MyEditDataForm
          onSubmit={(fields) => myHandleSubmit({ ...fields, anotherParameter: aNewParameter })}
        />
      </Row>
    </Container>
  );
};