Antd 양식의 드롭 다운 메뉴에 props를 매핑하는 방법은 무엇입니까?

Question

Ant 디자인 라이브러리를 사용하여 양식 안에 드롭 다운 메뉴를 사용하려고합니다. 나는 체크 박스 필드에 소품을 매핑하지 못했습니다. 업데이트는 (분명히) 필드 장식 자에 의해 수행되지 않습니다. 메뉴를 부모 드롭 다운에 바인딩하는 방법을 모르겠습니다.

인용 워드 프로세서 :

당신은 antd.Menu하여 메뉴 목록을 얻고, 당신이 필요로하는 경우에 대한 콜백 함수 onSelect를 설정할 수 있습니다.

하지만 소품에는 바인딩되지 않습니다. 유스 케이스를 어떻게 관리 할 수 ​​있습니까?

function logSelection(value) { 
console.log(value) 
} 

const MenuIterable = (props) => { 
    return (
    <Menu onSelect={props.selection}> 
     {props.entries.map((e,i) => 
     <Menu.Item> 
      <Checkbox checked={e.value} key={i}> 
      {e.name} 
      </Checkbox> 
     </ Menu.Item> 
    )} 
    </Menu> 
)} 

const FormFilters = Form.create({ 

    onFieldsChange(props, changedFields) { 
    props.onChange(changedFields); 
    }, 
    mapPropsToFields(props) { 
    return { 
     itemType: { 
      values: props.fields.itemType.values // [{name: "furniture", value:true}, ...] 
    } 
}; 
} 

})((props) => { 
    const { getFieldDecorator } = props.form; 

    return (
    <Form layout="inline"> 
     <FormItem label=""> 
     {getFieldDecorator('itemType', { 
      rules: [{ 
      required: true, 
      message: 'Item type required', 
      initialValue:props.fields.itemType.values 
      }], 
     })(
      < Dropdown 
       trigger={['click']} 
       overlay={<MenuIterable selection={logSelection} entries={props.fields.itemType.values} />} 
       onVisibleChange={props.fields.handleDropDown.bind(props.fields.dropDowns.itemType, { value:'itemType' })} 
       visible={props.fields.dropDowns.itemType} 
      > 
       <a> 
        Item type <Icon type="down" /> 
       </a> 
      </Dropdown> 
     )} 
     </FormItem> 
    </Form> 
); 
}); 

export default FormFilters; 

도움 주셔서 감사합니다.

Answer 1

"부모 드롭 다운 메뉴에서 메뉴를 바인딩하는 방법을 모르겠다"고 말하면 정확히 바인딩 할 대상이 무엇입니까? logSelection() 출력을 받고 있습니다. 그렇습니까? onSelect 함수에서 사용자 선택을 처리하고 폼 구성 요소의 일종의 handleChange 메서드까지 전파해야합니다.

코드를 모두 포함하지는 않았지만 특정 필드에 visible과 onVisibleChange이라는 바인딩이 이상하게 보입니다. 일반적으로 visible은 handleChange 메서드에서 설정 한 상태 부울에 바인딩됩니다. 이것이 docs에서 "메뉴를 숨기는 방법" 예 (하단 1, 오른쪽 열)는 기능 대신 클래스 구성 요소를 사용합니다.

Answer 2

바와 같이, 제스퍼 언급 I 폼 성분 handleChange 법의 일종까지 전파

로했다

Antd 폼 성분이 필드 값을 설정할 수있는 setFieldsValue 방법을 제공하며 양식 메서드 onFieldsChange을 트리거합니다.

const MenuIterable = (props) => { 
    return (
    <Menu onClick={props.selection}> 
     {props.entries.map((e,i) => 
      <Menu.Item key={e.displayName}> 
       <Checkbox checked={e.value} key={i}>{e.displayName}</Checkbox> 
      </ Menu.Item> 
     )} 
     <Menu.Item key={'apply'}> 
      <a type="primary">Apply</a> 
     </Menu.Item> 
    </Menu> 
) 
} 

및 관련 드롭 다운 :

이 뭔가를 제공

   < Dropdown 
       trigger={['click']} 
       overlay={ 
        <MenuIterable 
         selection={(e) => refetchDataBasedOnCheckboxSelection.bind(props.form.setFieldsValue, e)} 
         entries={props.fields.itemType.values} 
        /> 
       } 
       > 
       <a> 
        Item types 
        <Icon type="down" /> 
       </a> 
      </Dropdown> 

가 선택할 수있는 메뉴 내의 체크 박스의 존재로 인해 여러 번 트리거 onSelect에 관한 몇 가지 버그가 있지만 나는 믿는다 이 질문의 범위 밖입니다.

감사합니다!