Controlled Component

13219 ワード
テキストリンク

Controlled Component


React Component管理
  • データ
    • から
  • input、textarea、selectなどのHTML要素はデフォルトでは独自の状態であるが、React Componentで完全に制御される方式は
    • である.
    import { useCallback, useState } from "react";

export default function InputSample(){
  
  const [inputs, setInputs] = useState({
    name:'',
    nickname:''
  });
  
  const {name, nickname} = inputs


  const onChange = useCallback((e:React.ChangeEvent<HTMLInputElement>)=>{    

    const {name, value} = e.target

    setInputs(prev=>({
      ...prev,
      [name]:value 
    }))
  },[])
  
  return (
    <form>
      <input placeholder="이름"  name="name" value={name} onChange={onChange}/>
      <input placeholder="닉네임" name="nickname" value={nickname} onChange={onChange}/>
      <div>
        <b>값 : </b>
        {name} - {nickname}
      </div>
    </form>
  )
}

    Uncontrolled Component

  • DOM要素は独自の状態管理機能を使用し、必要に応じて
    • の値のみを参照する.
    import { useCallback, useRef } from "react";

export default function UnControlledInput(){
  
  //React.LegacyRef<HTMLInputElement>
  const nameInput = useRef<HTMLInputElement>(null);
  const nicknameInput = useRef<HTMLInputElement>(null);

  const onClick = useCallback((e:React.MouseEvent<HTMLButtonElement>)=>{
    e.preventDefault()
    const name = nameInput.current?.value
    const nickname = nicknameInput.current?.value

    console.log(name)
    console.log(nickname)
  },[])
  return (
    <form>
      <input         
        ref={nameInput}        
        />
      <input         
        ref={nicknameInput}/>
      <div>
        <b>값 : </b>
      </div>
      <button onClick={onClick}>button</button>
    </form>
  )
}
    podテスト
    ベクトル