英文:
Set Value of an Input Inside a Form with useState
问题
我试图使用useState来设置输入的值，但它不按我希望的方式工作。
因此，我使用Formik创建了一个预约系统的每周日程。我有用于空闲预约的单选按钮。当选择一个单选按钮时，我可以获取预约的时间数据。但我获取不到日期数据。因此，我尝试添加另一个输入来获取日期数据。我将输入的值设置为一个状态。当选择单选按钮时，它会设置日期。但在提交表单时，我获取的是初始值，而不是新设置的值。而有趣的是，当我尝试在输入中输入内容时，它会返回我想要的值加上我最后按下的键。但如果我什么都不做，它只返回初始值。
我的表单的初始值：
const [day, setDay] = useState("星期一");
<Formik
onSubmit={handleFormSubmit}
initialValues={{
firstname: "",
lastname: "",
email: "",
date: "",
day: day,
}}
>;
我设置状态的单选按钮：
<Field
type="radio"
name="date"
value={x.monPm3Time}
onClick={() => {
setDay("星期一");
}}
/>
以及将其值设置为状态的输入：
<Field
id="day"
name="day"
value={day}
/>
我的handleSubmit函数（目前只是用来查看是否工作）：
const handleFormSubmit = async (values) => {
console.log(values);
// 这里可以添加发送数据到服务器的代码
}
希望这对你有所帮助。
英文:
I'm trying to set an input's value with useState but it doesn't work the way I want it.
So I have a weekly schedule created with Formik for an appointment system. I have radio buttons for free appointments. And when selected I get the time data for the appointment. But I don't get the day. So I tried to add another input to get day data. I set the value of input to a state. And when a radio button selected it sets the day. But onSubmit I get the initial value, not the newly set value. And the funny thing is when I try to write something in my input, it returns my desired value + last key I pressed. But if I don't do anything, it just returns initial value.
Initial values of my form:
const [day, setDay] = useState("Gün");
<Formik
onSubmit={handleFormSubmit}
initialValues={{
firstname: "",
lastname: "",
email: "",
date: "",
day: day,
}}
>
My radio button where I set my state:
<Field
type="radio"
name="date"
value={x.monPm3Time}
onClick={() => {
setDay("Pazartesi");
}}
/>
And my input where its value set to state:
<Field
id="day"
name="day"
value = {day}
/>
My handleSubmit function (I'm just loggin them for now to see if it works):
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);
// });
}
答案1
得分: 1
I've tried to replicate your issue in a code editor, and I'm able to change the text in the input when the radio button is clicked. You can find my implementation here: https://stackblitz.com/edit/react-b5rvzg?file=src%2FApp.js
I also believe that you're not passing anything to your handleFormSubmit function, so you're not going to see anything. I could be wrong because I can't fully see how your code is set up.
英文:
So I've tried to replicate (as best as I could) your issue in a code editor, and I'm able to change the text in the input when the radio button is clicked. You can find my implementation here: https://stackblitz.com/edit/react-b5rvzg?file=src%2FApp.js
I also believe that you're not passing anything to your handleFormSubmit function, so you're not going to see anything. I could be wrong because I can't fully see how your code is set up
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论