Fluent UIフォームに反応するonChangeが機能しない(非常に単純なコード)

レスリーガオ

私が使用していますリアクトFluentUI簡単なフォームを構築するために、コードは以下の通りです

import React, { useState, FormEvent } from "react";

import { PrimaryButton } from "office-ui-fabric-react/lib/Button";

import { IUserFormValues } from "../../models/user";
import { Stack, TextField } from "@fluentui/react";

const NewUIForm = () => {
  const [user, setUser] = useState<IUserFormValues>({
    email: "",
    password: "",
  });

  const handleInputChange = (
    event: FormEvent<HTMLInputElement | HTMLTextAreaElement>
  ) => {
    const { name, value } = event.currentTarget;
    setUser({ ...user, [name]: value });
  };

  const log123 = () => {
    console.log(user.email);
  };

  return (
    <Stack>
      <Stack>
        <Stack.Item grow>
          <TextField
            placeholder="UserName"
            label="User Name"
            value={user.email}
            name="email"
            onChange={handleInputChange}
          />
          <TextField
            placeholder="Password"
            label="Password"
            value={user.password}
            name="password"
            onChange={handleInputChange}
          />
        </Stack.Item>
        <PrimaryButton onClick={log123}>Add</PrimaryButton>
      </Stack>
    </Stack>
  );
};
export default NewUIForm;

TextFieldに何かを入力するたびに、このエラーが発生します

TypeError:nullであるため、「event.currentTarget」のプロパティ「name」を分解できません。

誰かが私を助けることができますか?ありがとう!

キランLM

Fluent UI onChange関数は、イベントと値の2つのパラメーターを必要とします(オプション)

(event: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, newValue?: string) => void

https://developer.microsoft.com/en-us/fluentui#/controls/web/textfield#implementation

次のようにhandleInputChange関数を変更できます。

  const handleInputChange = (
    event: { target: HTMLInputElement },
    newValue:String
  ):void => {
    const { name } = event.target;
    setUser({ ...user, [name]: newValue });
  };

この作業フィドルはここから確認できます

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

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

編集
0

コメントを追加

0

関連記事

分類Dev

Microsoft Fluent Design for Web(CSSフレームワーク)

分類Dev

Fluent WaitでNoSuchElementExceptionを処理する

分類Dev

Entity Framework 7 Fluent APIがIsOptional()を認識しない

分類Dev

Fluent Nested GuardAPIを構築する方法

分類Dev

Eclipse Marketplaceエラー-予期しない例外:org / apache / http / client / fluent / Executor

分類Dev

VaporとFluentでMongoDBを使用する

分類Dev

Vapor 3、Fluent 3、および多対多の関係が期待どおりに機能しない

分類Dev

EF Core Fluent API(主キーからIDを削除する方法)

分類Dev

VaporアプリケーションでFluentと結合する

分類Dev

Fluent Validationバリデーターは、検証コードが追加される前にエラーになります

分類Dev

ビデオfluent-ffmpegに複数の画像を追加する

分類Dev

Fluent-bit-jsonログをElasticsearchの構造化フィールドに分割する

分類Dev

fluent-schemaでarray()を返す方法は?

分類Dev

Fluent UIDetailsListで選択したアイテムを取得する

分類Dev

Vapor4でFluentを使用した複雑なクエリ

分類Dev

How can i change the hover style of a PrimaryButton in Fluent UI?

分類Dev

入力フォームが機能しないように設定するカスタム反応フック

分類Dev

@ fluent-ui / reactと@ fluent-ui / react-northstar

分類Dev

electronic fluent-ffmpeg mergeToFile()コマンドpromiseがトリガーされない

分類Dev

ffmpegとnodejs(fluent-ffmpeg)を使用して再エンコードせずにビデオをカットする

分類Dev

Entity Framework 5 Fluent APIを使用して、列名が異なる外部キーを設定するにはどうすればよいですか?

分類Dev

読み込みなしのFluent-NHibernateクエリ

分類Dev

Fluent APIがSQLServerでID仕様(Is Identity)を作成しない

分類Dev

単純なPHP送信フォームが機能しない

分類Dev

Java Fluent API-より良い方法?

分類Dev

非常に単純なHTMLjsコードですが、なぜ機能しないのですか?

分類Dev

Fluent ValidationWithMessageがSetValidatorで正しく機能しない

分類Dev

単純なフォームが機能しない

分類Dev

Whenを使用したMVCとFluent検証

Related 関連記事

  1. 1

    Microsoft Fluent Design for Web(CSSフレームワーク)

  2. 2

    Fluent WaitでNoSuchElementExceptionを処理する

  3. 3

    Entity Framework 7 Fluent APIがIsOptional()を認識しない

  4. 4

    Fluent Nested GuardAPIを構築する方法

  5. 5

    Eclipse Marketplaceエラー-予期しない例外:org / apache / http / client / fluent / Executor

  6. 6

    VaporとFluentでMongoDBを使用する

  7. 7

    Vapor 3、Fluent 3、および多対多の関係が期待どおりに機能しない

  8. 8

    EF Core Fluent API(主キーからIDを削除する方法)

  9. 9

    VaporアプリケーションでFluentと結合する

  10. 10

    Fluent Validationバリデーターは、検証コードが追加される前にエラーになります

  11. 11

    ビデオfluent-ffmpegに複数の画像を追加する

  12. 12

    Fluent-bit-jsonログをElasticsearchの構造化フィールドに分割する

  13. 13

    fluent-schemaでarray()を返す方法は?

  14. 14

    Fluent UIDetailsListで選択したアイテムを取得する

  15. 15

    Vapor4でFluentを使用した複雑なクエリ

  16. 16

    How can i change the hover style of a PrimaryButton in Fluent UI?

  17. 17

    入力フォームが機能しないように設定するカスタム反応フック

  18. 18

    @ fluent-ui / reactと@ fluent-ui / react-northstar

  19. 19

    electronic fluent-ffmpeg mergeToFile()コマンドpromiseがトリガーされない

  20. 20

    ffmpegとnodejs(fluent-ffmpeg)を使用して再エンコードせずにビデオをカットする

  21. 21

    Entity Framework 5 Fluent APIを使用して、列名が異なる外部キーを設定するにはどうすればよいですか?

  22. 22

    読み込みなしのFluent-NHibernateクエリ

  23. 23

    Fluent APIがSQLServerでID仕様(Is Identity)を作成しない

  24. 24

    単純なPHP送信フォームが機能しない

  25. 25

    Java Fluent API-より良い方法?

  26. 26

    非常に単純なHTMLjsコードですが、なぜ機能しないのですか?

  27. 27

    Fluent ValidationWithMessageがSetValidatorで正しく機能しない

  28. 28

    単純なフォームが機能しない

  29. 29

    Whenを使用したMVCとFluent検証

ホットタグ

アーカイブ