反応選択でデフォルト値を設定するには

Question

私は反応選択を使用して問題があります。私はredux形式を使用し、私はredux形式と互換性のある私の反応選択コンポーネントを作った。私はそれをレンダリングする方法を

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> 

は、しかし、問題は、私のドロップダウンがないデフォルト値を持っていることを私が望むようにということです。私は間違っているの？何か案は？

Answer 1

私はあなたが私が同様のエラーを持っていたこの

<Select 
    {...props} 
    value={props.input.value?props.input.value:"Any"} 
    onChange={value => props.input.onChange(value)} 
    onBlur={() => props.input.onBlur(props.input.value)} 
    options={props.options} 
    placeholder={props.placeholder} 
    selectedValue={props.selectedValue} 
    /> 
); 

Answer 2

ようなものが必要と思います。オプションに値属性が設定されていることを確認してください。

<option key={index} value={item}> {item} </option> 

次に、最初に選択要素の値をオプションの値に一致させます。

<select 
    value={this.value} /> 

Answer 3

私はちょうどこれを通過し、減速機のINIT機能でデフォルト値を設定することを選択しました。

選択をreduxでバインドした場合、実際の値を表さない選択されたデフォルト値で「デバインド」しないでください。オブジェクトを初期化するときに値を設定してください。

Answer 4

あなたのオプションは、この

var options = [ 
    { value: 'one', label: 'One' }, 
    { value: 'two', label: 'Two' } 
]; 

ようにしている場合{props.input.value}があなたの{props.options}

意味で'value'のいずれかと一致しなければならないあなた、props.input.valueが'one'または'two'