[Udemy]Reactデフォルト-日記帳の作成(1)

18777 ワード
onchange State project useState 国連首長国連邦. udemy 一口サイズの反応 はんのう テキストリンク

動作基本(Project)


Udemy-一口大的反应


📌 日記帳の作成(1)



src/App.js

import "./App.css";
import DiaryEditor from "./DiaryEditor";

const App = () => {
  return (
    <div className="App">
      <DiaryEditor />
    </div>
  );
};
export default App;

src/DiaryEditor.js


▼DiaryEditor:日記帳コンポーネント
  • クラスの名前を構成部品の名前と一致させる(直感的なスタイルコードを作成する)
  • 著者(input)、日記本文(textarea)、鑑定点数(select)、保存(button)
    • ▼useState:元素を反応器で直接制御できるようにしなければならない
    ▼▼状態変化関数:inputとtextareaが受け取ったvaluepropに渡す

  • ユーザーのステータス(「作成者」):初期値の設定

  • onChange
    イベントをリアルタイムで値を変更するように設定する(コールバック関数を登録してイベントオブジェクトeをパラメータとして渡す)
    ユーザーが入力すると、onChangeはどのようなイベントが発生したかを認識し、onChangeは値を変更したときに実行されるイベントを認識します.
    =inputで値を変更した場合、onChangeのPropで渡されるコールバック関数を実行すると考えられます.

  • e.target.value
    コンソールを介して送信されたイベントオブジェクトを開くと、targetを開くと、変更した値をすぐに表示できます.
    イベントオブジェクトのtargetのvalueを使用すると、入力した値をコールバック関数にロードして使用できます.
    inputが変更しなければならない値

  • setAuthor(e.target.value), setContent(e.target.value)
    作成者が入力した値が変化すると、その値に更新されると、入力はステータスとともに使用できます.
    コールバック関数の実行時に、パラメータイベントオブジェクトeから現在入力されている(現在変化している)値を新しい状態の値に変更し、author、content stateを値に変更し、実際に画面に表示します.
    • const [author, setAuthor] = useState("");
const [content, setContent] = useState("");

<input name="author" value={author}
	onChange={ (e) => {setAuthor(e.target.value);}
} />
<textarea name="content" value={content}
	onChange={ (e) => {setContent(e.target.value);}
} />
    同じ状態(value、onChangeのコールバック関数、データ型(空白文字列)の場合、それらを1つの状態に組み合わせることができます.
  • state authorとcontentを一緒に
  • 新しいオブジェクトを作成して渡す必要があります(ステータスを変更する場合、setStateステータス変更関数に新しい変更値をパラメータとして渡すため)=オブジェクトの値を変更するには、新しいオブジェクトを作成して渡す必要があります
  • inputの著者はe.targetである.valueに変更する必要がありますが、コンテンツは変更できません(保持する必要があるため)、元の状態に更新されます.(textareaはコンテンツを変更し、作成者によって保持されます)
    • const [state, setState] = useState({
	author: "",
    content: "",
});

<input name="author" value={state.author}
	onChange={ (e) => {
    	setState({
        	author: e.target.value,
            content: state.content,
        });
    }
} />
<textarea name="content" value={state.content}
	onChange={ (e) => {
    	setState({
        	content: e.target.value,
            author: state.author,
        });
   	}
} />
    拡張演算子の使用
  • stateがオブジェクトにマージされ、複数の値
  • state展開その属性
  • setStateは、新しいオブジェクトを作成するときにauthor:e.targetを使用します.valueには新しい値があるはずですが、次の行にspread演算子がある場合、作成者の値が入力されます(元の値に上書きされた場合、最終的には何も更新されません)=>원래있던 state를 먼저 펼쳐주고 나서 변경하고자하는 state의 property를 마지막에 적어준다
    • const [state, setState] = useState({
	author: "",
    content: "",
});

<input name="author" value={state.author}
	onChange={ (e) => {
    	setState({
        	...state,
        	author: e.target.value,
        });
    }
} />
<textarea name="content" value={state.content}
	onChange={ (e) => {
    	setState({
        	...state,
        	content: e.target.value,
        });
   	}
} />
    ▼重複コード消去-eventHandlerマージ
  • eventHandler
    • inputとtextareaへのonChange
  • nameとvalue:置換値に自動的に更新
    •   const handleChangeState = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value,
    });
  };

<input name="author" value={state.author} onChange={handleChangeState} />
<textarea name="content" value={state.content} onChange={handleChangeState} />
    ▼▼感情点数1~5点(select,option)
  • 非文字列のため、デフォルトは1
    • です.
  • name、value、onChangeのスケールは同じ
  • emotionpropertyは、selectが他のオプションを選択した場合、onChangeイベント=>handleChangeState実行=>e.targerが発生することを示す.nameの感情値が変化し、=>オプションが変化する
    • const [state, setState] = useState({
	author: "",
    content: "",
    emotion: 1,
});

<select name="emotion" value={state.emotion} onChange={handleChangeState}>
  <option value={1}>1</option>
  <option value={2}>2</option>
  <option value={3}>3</option>
  <option value={4}>4</option>
  <option value={5}>5</option>
</select>
    保存#(button)
  • ボタンをクリックしてalertウィンドウ
    •   const handleSubmit = () => {
    console.log(state);
    alert("저장 성공!");
  };
  
  <button onClick={handleSubmit}>일기 저장하기</button>
    ☑️ CSS styling
    .App {margin:0 auto;}
.DiaryEditor { border:1px solid #e5e5e5; text-align:center; padding: 20px; }

.DiaryEditor input, .DiaryEditor textarea { margin:0 0 20px 0; padding:10px; width:500px; }
.DiaryEditor textarea { width:500px; height:150px; }
.DiaryEditor select { margin:0 0 20px 0; padding:10px; width:500px; }
.DiaryEditor button { cursor:pointer; padding:10px; width:500px; }
    📝 Result
    import { useState } from "react";

const DiaryEditor = () => {
  const [state, setState] = useState({
    author: "",
    content: "",
    emotion: 1
  });

  const handleChangeState = (e) => {
    setState({
      ...state,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = () => {
    console.log(state);
    alert("저장 성공!");
  };

  return (
    <div className="DiaryEditor">
      <h2>오늘의 일기</h2>
      <div>
        <input
          value={state.author}
          onChange={handleChangeState}
          name="author"
          placeholder="작성자"
          type="text"
        />
      </div>
      <div>
        <textarea
          value={state.content}
          onChange={handleChangeState}
          name="content"
          placeholder="일기"
          type="text"
        />
      </div>
      <div>
        <span>오늘의 감정점수 : </span>
        <select
          name="emotion"
          value={state.emotion}
          onChange={handleChangeState}
        >
          <option value={1}>1</option>
          <option value={2}>2</option>
          <option value={3}>3</option>
          <option value={4}>4</option>
          <option value={5}>5</option>
        </select>
      </div>
      <div>
        <button onClick={handleSubmit}>일기 저장하기</button>
      </div>
    </div>
  );
};
export default DiaryEditor;
    サイズエンドモード(コモンunionテスト、ポインタテスト)
    [risc-v]Cをrisc-vアセンブリに変換