1. ホーム
  2. reactjs

[解決済み] 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}
  />
);