[React] State - Props - Event

7383 ワード
React テキストリンク

State


簡単に言えば、Stateは変数です.(通常の変数とは異なり、値が変化するとレンダリング効果が異なります!)
  • の値が変更されると、関連する構成部品が再レンダリングされ、画面が変更されます.
  • propsなどのオブジェクトには、Appコンポーネントのレンダリング結果に影響を与えるデータがありますが、propsは(関数パラメータ)コンポーネントに渡され、ステータスは(関数内で宣言された変数と同じ)コンポーネントで管理されます.
  • で一緒に使用される関数はsetStateです.これはstate値を変更する関数です.
  • setState(3)に設定すると、ステータス値は3に変更されてレンダリングされますが、state=3と呼ばれる場合、値は変更されますがレンダリングされません.
    • (예시)const [state, setState] = useState("");

(내가 사용한 state)
const [id, setId] = useState('');
const [pw, setPw] = useState('');
const navigate = useNavigate();
const [button, setButton] = useState('');

    Props

  • propsはpropertiesの略
    • である
  • 任意の値を構成部品に渡す必要がある場合、props
    • を使用します.
  • 道具を入れると、対象の
    • が見えます
  • ()→式
    • アプリケーションコンポーネントでHelloコンポーネントを使用する場合、nameという名前の値を渡すとしたら、コードを記述します!
    import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}
  • 要素に渡されるpropsは、パラメータクエリ
    • を介して実行することができる.
  • propsオブジェクト形式で渡す-name値を問合せたい場合はprops.クエリーname

    • Event


  • onClick-クリック時の反応

  • onSubmit-クリック時に送信

  • Includes-(ex.include("@")ログインの検証に使用

  • 開発環境が最終的にHtmlに変更されることは理解できる.(Converting)
    • <form onSubmit={handleSubmit}>
<input
className="LoginId"
type="text"
placeholder="전화번호,사용자 이름 또는 이메일"
onChange={handleIdInput} // event
              />
<input
className="PassWord"
type="text"
placeholder="비밀번호"
onChange={handlePwInput} // event
              />
    function Header(props) {
return <Header>
<h1><a href="/" onClick={function(event){
event.preventDefault();//새로고침 방지
}}>(props.title)</a></h1>
</header>
    C#計算ファイルMD 5
    194. Installing Git