Saya memiliki masalah dalam menggunakan react-select. Saya menggunakan redux form dan saya telah membuat komponen react-select saya kompatibel dengan redux form. Berikut ini adalah kodenya:
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}
/>
);
dan di sini bagaimana saya merendernya:
<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>
Tetapi masalahnya adalah dropdown saya tidak memiliki nilai default seperti yang saya inginkan. Apa yang saya lakukan salah? Ada ide?
Saya kira Anda memerlukan sesuatu seperti ini:
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}
/>
);
Saya baru saja melalui ini sendiri dan memilih untuk mengatur nilai default pada fungsi INIT peredam.
Jika Anda mengikat select Anda dengan redux maka sebaiknya tidak ' de-bind ' itu dengan nilai default pilih yang tidak mewakili nilai sebenarnya, sebagai gantinya atur nilai saat Anda menginisialisasi objek.