🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Material-UI

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

React.js

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

Q&A

解決済

1回答

2739閲覧

React Material-UI Autocompleteの初期化

BaMa

総合スコア0

Material-UI

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

React.js

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

0グッド

0クリップ

投稿2021/02/08 02:44

前提・実現したいこと

Material-UIのautocompleteを利用しているのですが、
リストから値を選択しステートに保存をしたら、リストの選択を
初期化したいです。
テキストボックスでは、valueプロパティに値をいれることで初期化できます。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<Autocomplete
freeSolo
style={{ width: 500}}
loading={false}
options={props.data}
getOptionLabel={(option) => option.i_name}
onChange={(event,newValue)=>{
if(newValue){
let itemData=newValue.i_code+':'+newValue.i_name
setData(props.data,itemData,props.setItem,props.setBuy,props.setSell)
}else{
setClear(props.setItem,props.setBuy,props.setSell)
}
}}
renderInput={(params) =>
<TextField {...params}
label="DEMO"
variant="outlined"
/>
}
/>

試したこと

autocompleteにvalueプロパティを追加して、そこにステートを
指定してみましたが、optionsの値と同じものを指定しても空欄になっていましました。

補足情報(FW/ツールのバージョンなど)

npm version 6.14.8

以上になります。
よろしくお願いします。

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

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

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

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

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

guest

回答1

0

自己解決

Autocompleteにkeyを渡す事で初期化出来ました!

投稿2021/02/09 06:25

BaMa

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問