Tepki seçiminde varsayılan değer nasıl ayarlanır

Question

Tepki seçimlerini kullanarak bir sorun yaşıyorum. Ben redux formunu kullanıyorum ve redux form ile uyumlu reaksiyon seçim bileşenimi oluşturdum. ben bunu işlemek nasıl

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 burada: İşte kod

<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> 

Ama sorun benim açılan bir varsayılan değerin bulunduğunu i istediğiniz gibi olmasıdır. Ne yapıyorum yanlış? Herhangi bir fikir?

Answer 1

Bunu

<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

Ben benzer bir hata geçiriyormuş gibi bir şeye ihtiyacım sanırım. Seçeneklerin bir değer niteliğine sahip olduğundan emin olun.

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

Ardından, selects öğesi değerini başlangıçta seçenekler değerine eşleştirin.

<select 
    value={this.value} /> 

Answer 3

Bunu kendim yaptım ve redüktör INIT işlevinde varsayılan değeri ayarlamayı tercih ettim.

Seçiminizi redux ile bağlarsanız, gerçek değeri temsil etmeyen varsayılan bir değerle en iyisi 'de-bind' değil, bunun yerine nesneyi başlattığınızda değeri ayarlayın.

Answer 4

seçenekleriniz gibiyse bu

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

Sizin {props.input.value} sizin {props.options}

Anlamı 'value' biriyle eşleşmesi gerektiğini props.input.value olmalıdır ya 'one' veya 'two'