React×TypeScriptのonChangeのprops渡しで諦めない

2021年1月22日 18:35

今日は,執筆という気分ではないので,TechOutputをnoteでします.

親Component

const ParentComp = () => {
 const [inputValue, setInputValue] = React.useState('')
 const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
   setInputValue(e.target.value)
 }
 return <ChildComp value={inputValue} onChange={(e) => handleChange(e)} />
}

子Component

type ChildCompProps = {
 value: string
 onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
}

const ChildComp = (props: ChildCompProps) => <input value={props.value} onChange={e => props.onChange(e)} />

eventの型をstringで使うhandleChangeを挟むことで,怒られなくする.

意外と短く済むのです.

### 宣伝・広告

【生徒さん募集】

学校の先生が教えるプログラミング講座（オンライン個別対応）

プログラミングを新たに学んで人生変えたい人に向けて,フロント開発のための最新ライブラリのReactを教えてます.Webサイト作ったり,Webアプリ（Twitterやメルカリのような）を作ったりできるようになります.学習を終えた方にはフリーランスや複業として,一緒にお仕事ができる環境も用意できます！気になる方はTwitterのDMください！

【自己紹介】

https://note.com/nbr41/n/n60100b2dc1cf

総合ブログ

https://noblog.nbr41.com/

ポートフォリオサイトみたいなやつ

https://nbr41.com/

【プログラミング系】

YouTube

https://www.youtube.com/channel/UCPcjWvYIfvqGPP4x30kEkMA

Zenn

https://zenn.dev/nbr41to

GitHub

https://github.com/nbr41to