使用useState設定表單內輸入的值

Question

我正在嘗試使用 useState 設定輸入的值，但它無法按照我想要的方式運作。

因此，我使用 Formik 建立了一個用於預約系統的每週時間表。我有免費預約的單選按鈕。當選擇時，我會獲得約會的時間數據。但我沒有得到這一天。所以我嘗試添加另一個輸入來獲取每日數據。我將輸入的值設為狀態。當選擇單選按鈕時，它會設定日期。但是 onSubmit 我得到的是初始值，而不是新設定的值。有趣的是，當我嘗試在輸入中寫入內容時，它會傳回我想要的值 我按下的最後一個鍵。但如果我什麼都不做，它只會回傳初始值。

我的表單的初始值：

const [day, setDay] = useState("Gün");

<Formik
    onSubmit={handleFormSubmit}
    initialValues={{
    firstname: "",
    lastname: "",
    email: "",
    date: "",
    day: day,
    }}
>

我設定狀態的單選按鈕：

<Field
    type="radio"
    name="date"
    value={x.monPm3Time}
    onClick={() => {
        setDay("Pazartesi");
    }}
/>

我的輸入的值設定為 state：

<Field
    id="day"
    name="day"
    value = {day}
/>

我的handleSubmit函數（我現在只是登入它們看看它是否有效）：

const handleFormSubmit = async (values) => {
        console.log(values);
        // fetch("http://localhost:5000/api/appointment", {
        // method: "POST",
        // body: values,
        // headers: {
        // Authorization: "Bearer " token,
        // },
        // })
        // .then((res) => {
        // console.log(res.status);
        // })
        // .catch((err) => {
        // console.log(err);
        // });
}

Answer 1

因此，我嘗試在程式碼編輯器中複製（盡我所能）您的問題，並且當單擊單選按鈕時，我能夠更改輸入中的文字。您可以在這裡找到我的實作： https://stackblitz.com/edit /react-b5rvzg?file=src/App.js

我還相信您沒有將任何內容傳遞給您的handleFormSubmit 函數，因此您不會看到任何內容。我可能是錯的，因為我無法完全了解您的程式碼是如何設定的