📒TIL)複数人のインタラクションを容易に管理

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

複数人管理とは?


会員登録ページや予約ページなどの大きなフレームワークを見ると、フォームや入力値のようなウィンドウがたくさんあります.そのような場合にInputを管理することはコード上どのような効率があるのでしょうか.

State一体!


通常、以下のように、値を管理するために複数のstateが宣言されます.
const [ id , setId] = useState('')
const [ pw , setPw] = useState('')
const [ email , setEmail] = useState('')
しかし,Inputを管理するstateが多ければ多いほど,いちいち宣言する手間がかかる.
これは、1つのstateにおいてオブジェクトとして保存することができ、例は以下の通りである.
const [inputs, setInputs] = useState({
  id: '',
  pw: '',
  email: '',
 });
このようにして、inputsというステータス値を1つとして管理できます.

関数?


一般的な関数も次のように1つずつ使用を宣言します.
const handleId = e => {
  setId(e);
};

const handlePw = e => {
  setPw(e);
};
const handleEmail = e => {
  setEmail(e);
};
しかし、以下のように、nameとvalueを1つの関数として複数のstateを制御することができる!
制御を行うためには、入力、フォームにnameという属性を付与する必要があります.
<input type=text name=id onChange={handleInput}/>
<input type=text name=pw onChange={handleInput}/>
<input type=text name=email onChange={handleInput}/>
const handleInput = e => {
  const { value, name } = e.target;
  setInputs({
    ...inputs,
    [name]: value,
  });
};
Movie Time - React
n個の要素がスタックに入り、すべてのスタックシーケンス-カトラン数-再帰を出力する