반응 선택에서 기본값을 설정하는 방법

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

나는 비슷한 오류를 가졌다 같은 뭔가가 필요 같아요. 옵션에 value 속성이 있는지 확인하십시오.

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