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

Posted 2023-02-22

【中文标题】将带有预定义参数的函数传递给 React 中的 handleSubmit

【英文标题】：Pass a function with predefined parameter to handleSubmit in React

【发布时间】：2021-12-05 09:32:16

【问题描述】：

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

我做错了什么？

【参考方案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>
  );
;