質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

2604閲覧

Reactのinputをコンポーネント化するときに考えること

nazuna_Nakagawa

総合スコア27

Next.js

Next.jsは、Reactを用いたサーバサイドレンダリングなどを行う軽量なフレームワークです。Zeit社が開発しており、nextコマンドでプロジェクトを作成することにより、開発環境整備が整った環境が即時に作成できます。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

1グッド

0クリップ

投稿2020/07/08 17:00

編集2020/07/08 17:02

Reactの初心者です。
テキストボックスをコンポーネント化する際に、毎回、テキストボックスで躓いてしまいます。

躓きポイントは、以下。

  1. Reactのinputは自身で状態を持つ必要がある
  2. データの流れは単一方向なので、実際は親が状態を持つ必要がある

1番については、最小単位で作成する時に下記のような形になります。

tsx

1// input-search.tsx 2import { FC, useState, useCallback } from 'react'; 3 4type Props = { 5 value: string; 6}; 7 8const InputSearch: FC<Props> = props => { 9 const [text, setText] = useState(''); 10 11 const handleChange = useCallback( 12 e => { 13 setText(e.target.value); 14 }, 15 [text] 16 ); 17 18 return <input type={`text`} value={text} onChange={handleChange} />; 19}; 20 21export default InputSearch;

ですが、このように完結してしまうと、例えば「検索値を元にJSONデータを絞り込みしたい」場合は、入力値を親や別のコンポーネントに渡すことはできません。
これを2番にならって、下記のようにコールバックをpropsに渡す形にすれば、解決はします。

tsx

1// input-search.tsx 2import { FC, useState, useCallback } from 'react'; 3 4type Props = { 5 value: string; 6 inputChange: () => void; 7}; 8 9const InputSearch: FC<Props> = props => { 10 const [text, setText] = useState(''); 11 12 const handleChange = useCallback( 13 e => { 14 setText(e.target.value); 15 props.inputChange(e.target.value); 16 }, 17 [text] 18 ); 19 20 return <input type={`text`} value={text} onChange={handleChange} />; 21}; 22 23export default InputSearch;

完全に親に依存するのであれば、上記のコンポーネントで状態管理する処理を外すのもいいと思います。またReduxなどで管理する場合、このコンポーネントでアクションをトリガーにするのもいいと思います。

でも、待ってください。それは付け替え可能な最小単位なのでしょうか?
というところが疑問です。

テキストボックスの場合、大抵は入力値を他のコンポーネントに渡して利用するので、最小単位も「こういうもの」と思っていいのか、なにかいいやり方があるのか…
皆さんの知見をご教授いただければ幸いです。

hoshi-takanori👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hoshi-takanori

2020/07/10 06:21

再利用可能なコンポーネントをどう設計すべきかというご質問なら、既存のものを参考にしてみては。 https://material-ui.com/api/text-field/ (↑は汎用的すぎるので、コンポーネントの使い方に応じて必要なものを採用すればいいと思います。)
nazuna_Nakagawa

2020/07/11 19:11

そうですね、material-uiも変更イベントを受け入れないと動きませんものね。 自分の中で納得の落とし所ができました。ありがとうございます。
guest

回答1

0

自己解決

handleChangeイベントなどを渡して、外部で状態管理する方向で自己納得しました。

投稿2020/07/11 19:12

nazuna_Nakagawa

総合スコア27

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問