TIL 45|イメージファイルname,size(サブタイトル:変数は宣言されているが定義されていない)

以前はinputtype=fileを使用して、対応するボタンではなくカスタム画像ボタンを実現し、refアクセスに成功し、customizeボタンをクリックして画像を上に移動しました.
今したいのは、選択したファイルのnameとsizeを表示することです!
inputにonChangeHandlerを遠慮なく掛け、その上に対応する関数を作成し、file ziseとnameを変数にします.
コンソールを撮って、一気に!よく撮れました.

今、私はこの変数をjsxの中で私が望んでいる場所に置きました.
小龍.問題が発生した.🥲
(fyi,

  const fileChangedHandler = e => {

    const file_name = e.target.files[0].name;
    console.log(file_name);
  };
  
  
 	![](https://media.vlpt.us/images/moonsirl9123/post/a8e0cd61-6106-4cfd-a965-9b04cb44cc59/Screen%20Shot%202021-09-14%20at%2010.30.50%20AM.png)![](https://media.vlpt.us/images/moonsirl9123/post/c9b34b0e-f029-4f58-95d8-dfeab1dfdd5f/Screen%20Shot%202021-09-14%20at%2010.31.23%20AM.png)<input
            ref={myRef}
            style={{ display: 'none' }}
            className="today"
            type="file"
            accept="image/jpg, image/jpeg, image/png, .pdf"
            onChange={fileChangedHandler}
          />
            <button
            className="button3"
            onClick={() => {
              myRef.current.click();
            }}
          >
            이미지파일 업로드
            {file_name}
          </button>      

ああああああ!
もう泣かないで😭
関連の話題でハミングし、同じチームのダサーに話を聞くことにした.
ダーサー氏によると、変数を宣言して使用する場合、未定義の場合はstateを使用することができるという.
だからまず彼を国にした.
imgファイルは、複数に設定されている場合に配列です.
最初はstateを空の配列に設定し、そうであればsetStateも配列の値として使用します.
しかし、私が受け取ったsetStateは配列の形式ではありません.配列の0番目のファイルのsizeまたはnameを受信するからです.
したがって、初期値はnull(上から下へ変更!)

setStateはconstとして宣言された「変数」からsetStateに変更されます.

次にstateをjsxから{}にカプセル化し、使用してみます...

ファイルの名前とサイズが出てきました.😊
今はデザインをつかむだけで終わりです!🥳
関連項目:https://developer.mozilla.org/ko/docs/Web/HTML/Element/Input/file