Antdフォームのドロップダウンメニューにpropsをマップするにはどうすればよいですか？

Question

Antデザインライブラリを使用して、フォーム内のドロップダウンメニューを使用しようとしています。私は小道具のフィールドに小道具をマッピングすることはできませんでした。私が親のドロップダウンにonSelectをバインドする方法を知らないので、更新は（明らかに）フィールドデコレータによって行われません。

引用ドキュメントは：

あなたは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に関連するいくつかのバグがありますが、私はそれがだと信じてこの質問の範囲外です。

ありがとうございます！