用 useState 设置表单内输入的值

huangapple go评论65阅读模式
英文:

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(&quot;G&#252;n&quot;);

&lt;Formik
	onSubmit={handleFormSubmit}
	initialValues={{
	firstname: &quot;&quot;,
	lastname: &quot;&quot;,
	email: &quot;&quot;,
	date: &quot;&quot;,
	day: day,
	}}
&gt;

My radio button where I set my state:

&lt;Field
	type=&quot;radio&quot;
	name=&quot;date&quot;
	value={x.monPm3Time}
	onClick={() =&gt; {
		setDay(&quot;Pazartesi&quot;);
	}}
/&gt;

And my input where its value set to state:

&lt;Field
	id=&quot;day&quot;
	name=&quot;day&quot;
	value = {day}
/&gt;

My handleSubmit function (I'm just loggin them for now to see if it works):

const handleFormSubmit = async (values) =&gt; {
		console.log(values);
        // fetch(&quot;http://localhost:5000/api/appointment&quot;, {
		// 	method: &quot;POST&quot;,
		// 	body: values,
		// 	headers: {
		// 		Authorization: &quot;Bearer &quot; + token,
		// 	},
		// })
		// 	.then((res) =&gt; {
		// 		console.log(res.status);
		// 	})
		// 	.catch((err) =&gt; {
		// 		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

huangapple
  • 本文由 发表于 2023年6月8日 18:17:13
  • 转载请务必保留本文链接:https://go.coder-hub.com/76430842.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定