使用useState设置表单内输入的值
P粉588660399
2023-09-04 23:16:30
<p>我正在尝试使用 useState 设置输入的值,但它无法按照我想要的方式工作。</p>
<p>因此,我使用 Formik 创建了一个用于预约系统的每周时间表。我有免费预约的单选按钮。当选择时,我会获得约会的时间数据。但我没有得到这一天。所以我尝试添加另一个输入来获取日数据。我将输入的值设置为状态。当选择单选按钮时,它会设置日期。但是 onSubmit 我得到的是初始值,而不是新设置的值。有趣的是,当我尝试在输入中写入内容时,它会返回我想要的值+我按下的最后一个键。但如果我什么都不做,它只会返回初始值。</p>
<p>我的表单的初始值:</p>
<pre class="brush:php;toolbar:false;">const [day, setDay] = useState("Gün");
<Formik
onSubmit={handleFormSubmit}
initialValues={{
firstname: "",
lastname: "",
email: "",
date: "",
day: day,
}}
></pre>
<p>我设置状态的单选按钮:</p>
<pre class="brush:php;toolbar:false;"><Field
type="radio"
name="date"
value={x.monPm3Time}
onClick={() => {
setDay("Pazartesi");
}}
/></pre>
<p>我的输入的值设置为 state:</p>
<pre class="brush:php;toolbar:false;"><Field
id="day"
name="day"
value = {day}
/></pre>
<p>我的handleSubmit函数(我现在只是登录它们看看它是否有效):</p>
<pre class="brush:php;toolbar:false;">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);
// });
}</pre></p>
因此,我尝试在代码编辑器中复制(尽我所能)您的问题,并且当单击单选按钮时,我能够更改输入中的文本。您可以在这里找到我的实现: https://stackblitz.com/edit /react-b5rvzg?file=src%2FApp.js
我还相信您没有将任何内容传递给您的handleFormSubmit 函数,因此您不会看到任何内容。我可能是错的,因为我无法完全了解您的代码是如何设置的