React:入力値がフォームで定義されていません

イアン・マケイン

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 &nbsp; A &nbsp; 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 &nbsp; 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>

//..。

Akshay Pagare

以下の方法でもhandleChange関数を試すことができます。fromState変数データを取得し、[event.target.name]とその値を指定して、更新されたプロパティ名を使用してsetFormStateに拡散するだけで、状態が更新されます。

function handleChange(event) {
    setFormState({
           ...formState,
        [event.target.name]: event.target.value
    });
};

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

入力値はフォームから定義されていません

分類Dev

フォーム入力が調整されていません

分類Dev

フォーム入力が調整されていません

分類Dev

Reactフックフォーム、縮小された配列からデフォルト値を設定しても入力されませんが、同じオブジェクトを手動で入力すると入力されます

分類Dev

入力が編集されているのに、フォームが$ dirtyに設定されていません

分類Dev

ファイル入力が定義されていません

分類Dev

「フォーム」は定義されていませんreact / jsx-no-undef

分類Dev

Angular2-JQueryコードによって設定されたフォーム要素の値が他の手動で入力されたフォームデータとともに送信されていません

分類Dev

Laravelフォーム-ルートが定義されていません

分類Dev

Laravelフォームルートが定義されていません

分類Dev

行を取得するreact-bootstrapフォームが定義されていません

分類Dev

myFunctionはActiveAdminフォームとRailsで定義されていません

分類Dev

useHistoryがreactカスタムフックで定義されていません

分類Dev

JSF-XHTMLフォームで「名前にタグが定義されていません:validateRequired」エラー

分類Dev

mysqli接続でエラーは示されていませんが、フォームにテーブルが入力されていません

分類Dev

私のreactアプリで「 'デフォルトパラメータ'が定義されていません」

分類Dev

NameError:Djangoフォームでは、名前「リクエスト」が定義されていません

分類Dev

角度-$ indexが一部のフォーム入力で正しく繰り返されていません

分類Dev

ユーザー入力の「NameError:名前が定義されていません」

分類Dev

Multer req.fileはフォームを使用して定義されていませんが、postmanフォームデータは使用されていません

分類Dev

PHP配列へのHTMLフォーム入力。すべての値が掲載されているわけではありません

分類Dev

Ransack:フォームが送信され、検索値が入力されていない場合、何も返されません

分類Dev

フォームに入力されたtextareaフィールドが送信されていません

分類Dev

instance = objectが設定されていると、Djangoモデルフォームにデータが入力されません

分類Dev

関数のデフォルト値が定義されていません

分類Dev

Reactフォームの送信値が定義されていないのはなぜですか?

分類Dev

フォームの検証が正しく機能していません:名前が入力されていないままです

分類Dev

送信btnが無効になっている場合、事前入力されたフォーム入力要素は最初の入力を受け入れません

分類Dev

反応フォームを変更していますが、入力値は編集できません

Related 関連記事

  1. 1

    入力値はフォームから定義されていません

  2. 2

    フォーム入力が調整されていません

  3. 3

    フォーム入力が調整されていません

  4. 4

    Reactフックフォーム、縮小された配列からデフォルト値を設定しても入力されませんが、同じオブジェクトを手動で入力すると入力されます

  5. 5

    入力が編集されているのに、フォームが$ dirtyに設定されていません

  6. 6

    ファイル入力が定義されていません

  7. 7

    「フォーム」は定義されていませんreact / jsx-no-undef

  8. 8

    Angular2-JQueryコードによって設定されたフォーム要素の値が他の手動で入力されたフォームデータとともに送信されていません

  9. 9

    Laravelフォーム-ルートが定義されていません

  10. 10

    Laravelフォームルートが定義されていません

  11. 11

    行を取得するreact-bootstrapフォームが定義されていません

  12. 12

    myFunctionはActiveAdminフォームとRailsで定義されていません

  13. 13

    useHistoryがreactカスタムフックで定義されていません

  14. 14

    JSF-XHTMLフォームで「名前にタグが定義されていません:validateRequired」エラー

  15. 15

    mysqli接続でエラーは示されていませんが、フォームにテーブルが入力されていません

  16. 16

    私のreactアプリで「 'デフォルトパラメータ'が定義されていません」

  17. 17

    NameError:Djangoフォームでは、名前「リクエスト」が定義されていません

  18. 18

    角度-$ indexが一部のフォーム入力で正しく繰り返されていません

  19. 19

    ユーザー入力の「NameError:名前が定義されていません」

  20. 20

    Multer req.fileはフォームを使用して定義されていませんが、postmanフォームデータは使用されていません

  21. 21

    PHP配列へのHTMLフォーム入力。すべての値が掲載されているわけではありません

  22. 22

    Ransack:フォームが送信され、検索値が入力されていない場合、何も返されません

  23. 23

    フォームに入力されたtextareaフィールドが送信されていません

  24. 24

    instance = objectが設定されていると、Djangoモデルフォームにデータが入力されません

  25. 25

    関数のデフォルト値が定義されていません

  26. 26

    Reactフォームの送信値が定義されていないのはなぜですか?

  27. 27

    フォームの検証が正しく機能していません:名前が入力されていないままです

  28. 28

    送信btnが無効になっている場合、事前入力されたフォーム入力要素は最初の入力を受け入れません

  29. 29

    反応フォームを変更していますが、入力値は編集できません

ホットタグ

アーカイブ