react-select kullanırken bir sorunum var. Redux form kullanıyorum ve react-select bileşenimi redux form ile uyumlu hale getirdim. İşte kod:
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}
/>
);
ve işte nasıl işlediğim:
<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>
Ancak sorun şu ki, açılır menüm istediğim gibi varsayılan bir değere sahip değil. Neyi yanlış yapıyorum? Herhangi bir fikriniz var mı?
Sanırım böyle bir şeye ihtiyacın var:
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}
/>
);
Ben de benzer bir hata alıyordum. Seçeneklerinizin bir değer niteliğine sahip olduğundan emin olun.
<option key={index} value={item}> {item} </option>
Ardından ilk olarak selects öğesinin değerini options değeriyle eşleştirin.
<select
value={this.value} />
Bunu ben de yaşadım ve redüktör INIT işlevinde varsayılan değeri ayarlamayı seçtim.
Eğer select'inizi redux ile bağlarsanız, en iyisi gerçek değeri temsil etmeyen bir select varsayılan değeri ile 'de-bind' yapmayın, bunun yerine nesneyi başlattığınızda değeri ayarlayın.