React– category –

今回はReact Hook Form v7でMaterial UI v4のフォームを制御する方法をご紹介します。 Material UIのTextFieldやRadio、Selectは素直に動いてくれますが、Checkboxはちょっとしたコツ、工夫が必要です。サンプルコードをご紹介しますので是非参考にしてく...

React Hook FormでMaterial UIのCheckboxを制御でReact Hook Form v6でMaterial UIのCheckboxを制御する方法を紹介しました。 その後、React Hook Form v7がリリースされた。React Hook Form v7でMaterial-UIを制御する方法が少し変わりましたので、Materi...

When you are creating a form or something similar, there are times when you don't want the user to browser back, reload, or do anything else. The reason for this is that before the data you enter is saved, it will be lost by browser back...

When I click on the pagination of material-table, I get the following error. Unhandled Runtime Error TypeError: _this.props.onChangePage is not a function The environment in which this error occurs is as follows. material-ui v4.12.2 v5 a...

material-tableのページネーションをクリックすると以下のエラーが出るようになりました。 Unhandled Runtime Error TypeError: _this.props.onChangePage is not a function このエラーが発生する環境は以下の通りです。 material-ui v4.12.2 v5以降mater...

Next.jsのLinkとMaterial-UIのLinkは通常併用できません。しかし、ちょっとした工夫でこれらを併用できます。 Next.jsとMaterial-UIのLinkを用いて作るリンクのコンポーネントの要件は次のとおりです。 リンクができるNext.jsのLinkが機能するMaterial-UI...

Next.jsとmaterial-tableはとても使い勝手がいいので僕はよく使います。しかし、これらは相性が悪く、Next.jsでmaterial-tableは素直に動いてくれません。 Next.jsでmaterial-tableを使用するにはハマりポイントがあり、以下のエラーが出ます。 TypeError:...

urlパラメータにしたいキーと値を以下のようにまとめて、URLパラメータに変換したいときが度々あるので、オブジェクトをURLパラメータに変換する方法をまとめます。 var paramObj = { param1: 'hoge', param2: 'foo', param3: 'bar...

Gatsby.jsでスターターを用いて新規プロジェクトを作成する時に、以下のエラーが出たのでこのエラーの原因と解消方法をご紹介します。 $ gatsby new my-gatsby-project https://github.com/gatsbyjs/gatsby-starter-default info Creating new site from g...

フォームなどを作っている時に、ユーザーにブラウザバックやリロードなどの操作をしてほしくないときがあります。 その理由は入力したデータが保存される前で、ブラウザバックやリロードなどによってデータが消えてしまうからです。 この記事ではreactでブ...