reactjs React形式:两个提交按钮为同一表单执行两个不同的任务

xytpbqjk  于 2023-02-03  发布在  React
关注(0)|答案(4)|浏览(184)

我想有两个提交按钮,我的形式。
两者都将使用相同的输入和表单验证,但执行不同的任务

export default function Formtwosubmits() {

  function handlesubmit_task1(){

  }

  function handlesubmit_task2(){

  }

  return (
    <>
      <form onSubmit={handlesubmit_task1 if task 1 button pressed || handlesubmit_task2 if task2 button pressed } >
        <Button variant="contained" color="primary" type="submit">
          task 1
        </Button>

        <Button variant="contained" color="primary" type="submit">
          task 2
        </Button>
        .... here input fields
      </form>
    </>
  );
}

我不明白如何为不同的按钮传递不同的句柄和函数
我试过:

export default function Formtwosubmits() {

  function handlesubmit_task1(){

  }

  function handlesubmit_task2(){

  }

  return (
    <>
      <form >
        <Button variant="contained" color="primary" type="submit" onClick={handlesubmit_task1}>
          task 1
        </Button>

        <Button variant="contained" color="primary" type="submit" onClick={handlesubmit_task2}>
          task 2
        </Button>
        .... here input fields
      </form>
    </>
  );
}

onClick放在按钮上。使用type=submit,但这不会检查表单验证(如必填等),而使用onSubmit,我看到表单验证已检查
我怎样才能用onClick触发表单验证呢?这对我也有帮助

izkcnapc

izkcnapc1#

form元素上使用React ref来访问提交处理程序中的表单字段,并将提交处理程序附加到每个按钮的onClick处理程序。

function Formtwosubmits() {
  const formRef = useRef(); // (1) <-- React ref for form DOMNode

  function handlesubmit_task1(event) {
    event.preventDefault();
    const { value } = formRef.current.myInput; // (4) <-- access form inputs by name

    // ...anything you need to do with form fields
    console.log("handler 1", value);

    formRef.current.reset(); // (5) <-- reset form if necessary
  }
  
  function handlesubmit_task2(event) {
    event.preventDefault();
    const { value } = formRef.current.myInput;

    console.log("handler 2", value);

    formRef.current.reset();
  }

  return (
    <>
      <form ref={formRef}> // (2) <-- Attach ref to element
        <button
          variant="contained"
          color="primary"
          type="submit"
          onClick={handlesubmit_task1} // (3) <-- Attach submit handler 1
        >
          task 1
        </button>
        <button
          variant="contained"
          color="primary"
          type="submit"
          onClick={handlesubmit_task2} // (3) <-- Attach submit handler 2
        >
          task 2
        </button>
        .... here input fields
        <input name="myInput" type="text" />
      </form>
    </>
  );
}

演示

更新

您可以为每个提交按钮分配一个id,并访问React Synthetic event's nativeEvent以获取底层浏览器事件和submitter值。
创建一个submitHandler来接收表单的onSubmit事件,检查submitter值,并将onSubmit事件代理到基于id的适当处理程序。

const handlers = {
  submit1: handlesubmit_task1,
  submit2: handlesubmit_task2,
}

const submitHandler = (e) => {
  const { id } = e.nativeEvent.submitter; // <-- access submitter id
  handlers[id](e); // <--proxy event to proper callback handler
};

function handlesubmit_task1(event) {
  event.preventDefault();
  const { value } = event.target.myInput;
  console.log("handler 1", value);
  event.target.reset();
}

function handlesubmit_task2(event) {
  event.preventDefault();
  const { value } = event.target.myInput;
  console.log("handler 2", value);
  event.target.reset();
}

<form onSubmit={submitHandler}>
  <button
    id="submit1" // <-- id 1
    variant="contained"
    color="primary"
    type="submit"
  >
    task 1
  </button>
  <button
    id="submit2" // <-- id 2
    variant="contained"
    color="primary"
    type="submit"
  >
    task 2
  </button>
  .... here input fields
  <input name="myInput" type="text" />
</form>

flvlnr44

flvlnr442#

你可以这样写:

export default function App() {
  function handleSubmitTask1() {
    console.log("Execute Task1");
  }

  function handleSubmitTask2() {
    console.log("Execute Task2");
  }

  return (
    <form
      onSubmit={(e) => {
        const buttonName = e.nativeEvent.submitter.name;
        if (buttonName === "button1") handleSubmitTask1();
        if (buttonName === "button2") handleSubmitTask2();
      }}
    >
      <input name="123" />

      <button type="submit" name="button1">
        task 1
      </button>
      <button type="submit" name="button2">
        task 2
      </button>
    </form>
  );
}

要点是获取触发表单提交的按钮的名称。

o3imoua4

o3imoua43#

在按钮本身上使用onClick并添加type='submit'以提交它。

export default function Formtwosubmits() {

  function handlesubmit_task1(e){

  }

  function handlesubmit_task2(e){

  }

  return (
    <>
      <form >
        <Button variant="contained" color="primary" type="submit" onClick={handlesubmit_task1}>
          task 1
        </Button>

        <Button variant="contained" color="primary" type="submit" onClick={handlesubmit_task2}>
          task 2
        </Button>
        .... here input fields
      </form>
    </>
  );
}
zf9nrax1

zf9nrax14#

这对我很有效,使用event.nativeEvent.submitter.id
表单(注意,每个按钮的id属性值都是不同的):

<form onSubmit={this.testHandle}>
  <input type="submit" id="btn1" value="Submit button 1" />
  <input type="submit" id="btn2" value="Submit button 2" />
</form>

经办人:

testHandle(event) {
  console.log(event.nativeEvent.submitter.id);
  event.preventDefault();
}

它成功地在控制台btn1btn2中打印,具体取决于您单击的表单按钮。
注:使用React 18.2.0。

相关问题