Ich habe ein Problem mit react-select. Ich benutze redux form und ich habe meine react-select Komponente kompatibel mit redux form gemacht. Hier ist der Code:
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}
/>
);
und hier wie ich es rendere:
<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>
Aber das Problem ist, dass mein Dropdown keinen Standardwert hat, wie ich möchte. Was mache ich falsch? Irgendwelche Ideen?
Ich denke, Sie brauchen so etwas:
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}
/>
);
Ich hatte einen ähnlichen Fehler. Stellen Sie sicher, dass Ihre Optionen ein value-Attribut haben.
<option key={index} value={item}> {item} </option>
Dann passen Sie den Wert des Elements selects zunächst an den Wert von options an.
<select
value={this.value} />
Ich habe das gerade selbst ausprobiert und mich dafür entschieden, den Standardwert in der Funktion INIT des Reduzierers festzulegen.
Wenn Sie Ihr select mit redux binden, dann am besten nicht 'de-bind' es mit einem select Standardwert, der nicht den tatsächlichen Wert darstellt, stattdessen setzen Sie den Wert, wenn Sie das Objekt initialisieren.