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

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

新規登録して質問してみよう
ただいま回答率
85.35%
Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

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

Q&A

解決済

1回答

8550閲覧

reactのstateを更新した時にvalueを書き換え、かつinput要素を自由に書き換えられるようにしたい。

hello_space

総合スコア24

Material-UI

Material-UIは、Material Designを利用可能なオープンソースのReact向けUIコンポーネントキットです。

React.js

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

0グッド

0クリップ

投稿2020/12/02 12:20

編集2020/12/02 14:58

reactのstateをmaterial-ui(TextField)のvalueに渡しTextFieldの値を変更し、かつ手打ちでも変更できるようにしたいのですがうまくいきません。
TextField value={state名}とするとstateが変更された時に表示も変わるのですが、そうすると手打ちでTextFieldに入力することができません。
TextField defaultValue={state名}とすると手打ちで変更できるのですが、今度はstateを変更しても表示が変わりません。
これらの両方(stateを更新した時にvalueを書き換え、かつinput要素を自由に書き換えられるよう)を実現するにはどのようにしたらよろしいでしょうか?

イメージとしては以下です。

javascript

1const [value, setValue] = useState(0); 2 3const change = () => { 4 setValue(value + 1) 5} 6 7// これだと表示は変わるが、inputに直接書き込めない 8return <TextField value={value} onChange={change}/>; 9 10// これだとstateが変わっても表示が変わらないがinputには書き込める 11return <TextField defaultValue={value} onChange={change}/>; 12 13

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

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

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

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

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

guest

回答1

0

ベストアンサー

onChangeイベントを拾って、そこでstateを変更するようにしてください。

投稿2020/12/02 12:25

maisumakun

総合スコア146018

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

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

maisumakun

2020/12/02 12:26

それとも、「stateと違う値を入力された状態」も発生させられるように動かしたい、ということでしょうか?
hello_space

2020/12/02 14:13

質問に追記しました。 ①例えば別でstateを変更するためのボタンを作成し、それをクリックした時にsetStateして書き換わったstateをinputのvalueとして持つこと ②inputとして使用するために手打ちしてもinputの中のvalueが変更できること 上記2点を実現したいです。 現状value={state}を使うとinputに入力ができず、defaultValue={state}だとstateを変更しても書き変わりません。
maisumakun

2020/12/02 14:23

元の回答のとおりです。「inputの変更時にstateを変更する」ようにすることで、②を①にまとめてしまいます。
maisumakun

2020/12/02 14:23

(それはやりたくない、何らかの理由があるのでしょうか?)
maisumakun

2020/12/02 14:27

追記を確認しました。 onChangeで固定値を流しているのはなぜですか?
hello_space

2020/12/02 15:03

固定値に意味はありませんでしたので質問の内容を変更いたしました。 <TextField value={state}>とするとinputがstateで固定されてしまい変更できないということはありませんでしょうか? イベントを拾うというのはsetState(e.target.value)のような形あっていますでしょうか?
hello_space

2020/12/02 15:14

おっしゃっていただいたようにonChangeでstateを変えることで実現できました。 途中コードの複雑さから勘違いをしてしまい、違うところをいじっていてうまくいきませんでした。 解決しほっとしています。ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問