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

Question

我在组件“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”、未定义

我做错了什么？

Answer 1

可能你需要这个：

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