2017-03-01 3 views
2

저는 react-redux에 새로 왔으며 반응 선택으로 드롭 다운을 만들고 싶습니다. 이 같은 내 드롭 구성 요소 생성 :React-redux 형식으로 선택

import React, { PropTypes } from 'react'; 
import Select from 'react-select'; 
import 'react-select/dist/react-select.css'; 

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

const MyDropdown = ({ input }) => (
    <div> 
    <Select 
     {...input} 
     value="one" 
     options={options} 
     multi={true} 
     onBlur={() => { 
     input.onBlur([...input.value]); 
     } 
    } 
    /> 
    </div> 
); 

MyDropdown.propTypes = { 
    input: PropTypes.string.isRequired 
}; 

export default MyDropdown; 

을 그리고 난 여기

<Field 
      id="status" 
      name="status" 
      component={MyDropdown} 
      /> 

에 렌더링 내 그것은 나에게 요소 유형이 유효하지 않습니다 "라는 성가신 오류가있어 : 내장 된 구성 요소 (문자열을 예상을) 또는 클래스/함수 (복합 구성 요소의 경우)가 있지만 : undefined "가됩니다. 무슨 일이야?

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

<Field 
      id="status" 
      name="status" 
      component={MyDropdown} 
      options={options} 
      clearable={false} 
      /> 

귀하의 구성 요소의 모양은 다음과 같습니다 : 필드에 대한 당신의 형태로

+0

'필드'는 어디에서 오는가? 그게 부트 스트랩 일인가요? –

+0

필드를 redux-form에서 가져오고 있습니다 – user7334203

+0

우리가 알고있는 바로 값을 입력하십시오 : {input.value} – user7334203

답변

0

import React, { PropTypes } from 'react'; 
import Select from 'react-select'; 

const MyDropdown = ({ input, ...props }) => { 
const handleBlur =() => input.onBlur 
return (
    <div> 
     <Select 
      instanceId={input.name} 
      {...input} 
      {...props} 
      onBlur={handleBlur} 
     /> 
    </div> 
) 
} 

이 전달 된 옵션을 확인 일을하고 내부 사용자 정의 메소드를 작성하지 않은 경우 MyDropdown 구성 요소를 전달한 목록에서 옵션을 생성하고 <select/>에 소품으로 전달합니다. 그래도 효과가있다.