APIに送信するフォームを作成しようとしています。ただし、ネストされたキーをいくつか追加すると、値が定義されていないことが示されます。また、ネストされたキーを呼び出すフォーム入力の場合のみ、入力フィールドにテキストを入力できません。onChangeハンドラーがあるので、テキストを入力できます。
関連するコードは以下のとおりです。私の問題は「アドレス:{...}」キーに起因しています。
どんなアイデアでも大歓迎です!
const [formState, setFormState] = useState({
photo: '',
address: {
street: '',
city: '',
state: '',
zip: '',
},
price: '',
sqft: '',
bed: '',
bath: '',
additionalDetails: {
ac: false,
laundry: false,
garage: false,
offStreetParking: false,
fireplace: false,
pool: false,
hardwoodFloors: false,
sewer: false,
schoolsNearby: false,
parksNearby: false,
}
});
function handleChange(event) {
setFormState(prevState => ({
...prevState,
[event.target.name]: event.target.value
}));
};
async function handleSubmit(event) {
try {
event.preventDefault();
setFormState(event);
await createListing(formState);
props.history.push('/dashboard');
props.refresh();
} catch (error) {
alert(error.message);
};
};
return(
<div>
<div className={styles.CreateListingHeader} >
<h1>C R E A T E A L I S T I N G</h1>
</div>
<div className={styles.CreateListingMain}>
<div className={styles.CreateFormMain}>
<form className={styles.CreateListingForm} onSubmit={handleSubmit}>
<div className={styles.CreateFormItem}>
<input
className={styles.CreateFormInput}
value={formState.photo}
onChange={handleChange}
type='text'
name='photo'
placeholder=' P H O T O L I N K'
/>
</div>
<div className={styles.CreateFormItem}>
<div className={styles.CreateFormAddressItem}>
<input
className={styles.CreateFormInput}
value={formState.address.street}
onChange={handleChange}
type='text'
name='street'
placeholder=' S T R E E T'
/>
<input
className={styles.CreateFormInput}
value={formState.address.city}
onChange={handleChange}
type='text'
name='city'
placeholder=' C I T Y'
/>
<input
className={styles.CreateFormInput}
value={formState.address.state}
onChange={handleChange}
type='text'
name='state'
placeholder=' S T A T E'
/>
<input
className={styles.CreateFormInput}
value={formState.address.zip}
onChange={handleChange}
type='text'
name='zip'
placeholder=' Z I P'
/>
</div>
//..。
以下の方法でもhandleChange関数を試すことができます。fromState変数データを取得し、[event.target.name]とその値を指定して、更新されたプロパティ名を使用してsetFormStateに拡散するだけで、状態が更新されます。
function handleChange(event) {
setFormState({
...formState,
[event.target.name]: event.target.value
});
};
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加