使用嵌套在 Link 標簽內的按鈕時反應表單不提交

Question

在我的應用程序中，我有一個訂單表格，底部有一個“完成訂單”按鈕。 我想要按鈕做的是提交表單並將用戶推送到將顯示他們的訂單的確認頁面。 現在我可以做其中之一，但不知道如何同時做。

我的表單組件：

<form onSubmit={onSubmit}>
    <label>Name:
        <input 
            type="text"
            name="name"
            placeholder="Name"
            value={values.name}
            onChange={onChange}
        />
    </label>
    <Link to="/confirmation" >
        <button>Complete Order</button>
    </Link>
</form>

我的 onSubmit function：

const formSubmit = () => {
  const newOrder = {
    name: formValues.name.trim(),
  }

  setOrder(order.concat(newOrder));
  setFormValues(initialFormValues);
}

我可以告訴我的 formSubmit function 提交不起作用，因為我的 formValues 在提交表單后沒有重置。 如果我刪除 Link 標簽而只有按鈕，他們會這樣做，但我不會重定向到確認頁面。 關於我能做什么有什么建議嗎？

Answer 1

如果您想更新/重置表單 state然后導航到"/confirmation"路徑，您不能同時使用Link和button /提交表單。

在將 state 更新加入隊列后，刪除Link組件並發出命令式導航。 不要忘記阻止默認表單操作的發生，這樣應用程序就不會重新加載。

import { useNavigate } from 'react-router-dom';

...

const navigate = useNavigate();

...

const onSubmit = (e) => {
  e.preventDefault();

  const newOrder = {
    name: formValues.name.trim(),
  };

  setOrder(order.concat(newOrder));
  setFormValues(initialFormValues);
  navigate("/confirmation");
}

...

<form onSubmit={onSubmit}>
  <label>Name:
    <input 
      type="text"
      name="name"
      placeholder="Name"
      value={values.name}
      onChange={onChange}
    />
  </label>
  <button type="submit">Complete Order</button>
</form>