Cách đặt giá trị mặc định trong phản ứng chọn

Question

tôi gặp sự cố khi chọn phản ứng. Tôi sử dụng hình thức redux và tôi đã làm cho thành phần phản ứng chọn của tôi tương thích với hình thức redux. Đây là mã:

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} 
     /> 
    ); 

và ở đây làm thế nào tôi làm cho nó:

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

Nhưng vấn đề là rằng thả xuống của tôi có không phải là một giá trị mặc định như tôi muốn. Những gì tôi đang làm sai? Bất kỳ ý tưởng?

Answer 1

Tôi đoán bạn cần một cái gì đó như thế này

<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

Tôi đã có một lỗi tương tự. Đảm bảo các tùy chọn của bạn có thuộc tính giá trị.

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

Sau đó, khớp giá trị phần tử chọn ban đầu với giá trị tùy chọn.

<select 
    value={this.value} /> 

Answer 3

Tôi đã tự mình thực hiện điều này và chọn đặt giá trị mặc định ở hàm INIT của bộ giảm tốc.

Nếu bạn ràng buộc lựa chọn của bạn bằng redux thì tốt nhất là không 'bỏ liên kết' nó với giá trị mặc định được chọn không đại diện cho giá trị thực, thay vào đó đặt giá trị khi bạn khởi tạo đối tượng.

Answer 4

Nếu lựa chọn của bạn là như thế này

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

bạn {props.input.value} phải phù hợp với một trong những 'value' trong bạn {props.options}

Ý nghĩa, props.input.value nên một trong hai 'one' hoặc 'two'