[解決済み] react-selectでデフォルト値を設定する方法
2022-03-07 21:08:24
質問
react-selectを使用していて問題があります。私はredux formを使用していますが、react-selectコンポーネントをredux formと互換性を持たせました。以下はそのコードです。
const MySelect = props => (
<Select
{...props}
value={props.input.value}
onChange={value => props.input.onChange(value)}
onBlur={() => props.input.onBlur(props.input.value)}
options={props.options}
placeholder={props.placeholder}
selectedValue={props.selectedValue}
/>
);
で、これをレンダリングするとこうなります。
<div className="select-box__container">
<Field
id="side"
name="side"
component={SelectInput}
options={sideOptions}
clearable={false}
placeholder="Select Side"
selectedValue={label: 'Any', value: 'Any'}
/>
</div>
しかし、問題は、私のドロップダウンが私が望むようにデフォルト値を持っていないことです。私は何を間違えているのでしょうか?何かアイデアはありますか?
どうすればいいですか?
このようなものが必要なのでしょう。
const MySelect = props => (
<Select
{...props}
value = {
props.options.filter(option =>
option.label === 'Some label')
}
onChange = {value => props.input.onChange(value)}
onBlur={() => props.input.onBlur(props.input.value)}
options={props.options}
placeholder={props.placeholder}
/>
);
関連
-
[解決済み】Reactを使用したMapBoxのCSSが欠落している件
-
[解決済み】ReactJS: マテリアルuiのブレークポイントについて
-
[解決済み] ReactJS giving error Uncaught TypeError: Super expression は null か関数でなければならず、undefined ではありません。
-
[解決済み] react nativeで関数だらけのヘルパーファイルを作成する方法は?
-
[解決済み] ReactjsのEsLintの "react / jsx-props-no-spreading "エラーを無効化する。
-
[解決済み] ReactJS - SCRIPT1010: 期待される識別子 - IE11 で本番ビルドが実行されない
-
[解決済み] componentDidUpdate'メソッドはいつ使用するのですか?
-
[解決済み] Reactルータを使ったプログラムによるナビゲーション
-
[解決済み] React JSX内のループ
-
[解決済み] React jsのonClickはメソッドに値を渡すことができない
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】React 17で動作するEnzymeアダプターはどれですか?
-
[解決済み】Reactコンポーネント内でswitchステートメントを使用するには?
-
[解決済み】コンポーネントの定義に表示名がない react/display-name
-
[解決済み] reactでonloadを使うには?
-
[解決済み] react-router-domを使用する際に「Function components cannot be given refs」を回避するにはどうすればよいですか?
-
[解決済み] ReactJsのCreateClassは関数ではない
-
[解決済み] sh: react-scripts: npm start の実行後にコマンドが見つからない。
-
[解決済み] 拡張子.tsと.tsxの違いは何ですか?どちらもreactのタイプスクリプトファイルの拡張子として使用されます。では、どこで使うべきなのでしょうか?
-
[解決済み] Reactプロジェクトに.envファイルを追加する
-
[解決済み] Reactの制御型コンポーネントと非制御型コンポーネントとは?