时,可以按照以下步骤进行操作:
import React, { useState } from 'react';
const initialFormData = {
name: '',
age: '',
address: {
street: '',
city: '',
country: ''
}
};
const [formData, setFormData] = useState(initialFormData);
<input
type="text"
value={formData.name}
onChange={e => setFormData({ ...formData, name: e.target.value })}
/>
<input
type="text"
value={formData.age}
onChange={e => setFormData({ ...formData, age: e.target.value })}
/>
<input
type="text"
value={formData.address.street}
onChange={e => setFormData({
...formData,
address: { ...formData.address, street: e.target.value }
})}
/>
<input
type="text"
value={formData.address.city}
onChange={e => setFormData({
...formData,
address: { ...formData.address, city: e.target.value }
})}
/>
<input
type="text"
value={formData.address.country}
onChange={e => setFormData({
...formData,
address: { ...formData.address, country: e.target.value }
})}
/>
在上述代码中,我们使用了展开运算符(...)来创建一个新的对象,以便在更新表单数据时保留原始对象的不可变性。通过使用嵌套结构,我们可以轻松地更新嵌套对象中的特定属性。
对于这个问题,腾讯云的相关产品是不适用的,因此不需要提供相应的推荐和链接地址。
领取专属 10元无门槛券
手把手带您无忧上云