【React】親コンポーネントのuseStateから子コンポーネントの値を管理する

子コンポーネントからonChangeイベントを検知し、値を取得して親コンポーネントに渡します。

子コンポーネント名: Input.tsx
親コンポーネント名: Parent.tsx
この二つのコンポーネントを使用して解説を行なっていきます。

Parent.tsx

Parent.tsx

import Input from '...'

const Parent = () => {
  const [password, setPassword] = useState('')

  return <Input onChange={setPassword} />
}

Inputコンポーネントに対して、onChangeという関数をPropとして渡しています。

Input.tsx

Input.tsx

interface Props {
  onChange: (arg: string) => void
}

const Input<Props> = ({
  onChange
}) => {
 
  return (
    <input
      type="text"
      onChange={(e) => onChange(e.target.value)}
    />
  )
}

Parent.tsxからPropで渡ってきたonChangeイベントを受け取り、input要素で使用します。
input要素でonChangeイベントを捕捉したら、親からPropで渡ってきたonChangeを発火させます。