Forms 如何在Antd表单中将道具映射到下拉菜单？

我试图使用Ant设计库在表单中使用下拉菜单。我没有将道具映射到复选框字段。很明显，字段装饰器不会进行更新，因为我不知道如何将菜单onSelect绑定到父下拉列表

引用文件：

您可以通过antd.menu获取菜单列表，如果需要，可以在select上为其设置回调函数

但它不绑定到道具。 你知道如何管理这个用例吗

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;

功能日志选择（值）{
console.log（值）
}
const menuitable=（道具）=>{
返回(
{props.entries.map（（e，i）=>
{e.name}
)}
)}
const FormFilters=Form.create({
onfielschange（道具、变更场）{
道具更换（更换场地）；
},
mapPropsToFields（道具）{
返回{
项目类型：{
值：props.fields.itemType.values/[{name:“furniture”，value:true}，…]
}
};
}
})（（道具）=>{
const{getFieldDecorator}=props.form；
返回(
{getFieldDecorator（'itemType'{
规则：[{
要求：正确，
消息：“需要项目类型”，
initialValue:props.fields.itemType.values
}],
})(
<下拉列表
触发器={['click']}
覆盖={}
onVisibleChange={props.fields.handleDropDown.bind（props.fields.dropDowns.itemType，{value:'itemType'}}
visible={props.fields.dropDowns.itemType}
>
项目类型
)}
);
});
导出默认表单过滤器；

谢谢你的帮助

当您说“我不知道如何将选择菜单绑定到父下拉列表”时，您到底想绑定什么？您正在获得

logSelection（）

输出，是吗？在

onSelect

函数中，您应该处理用户选择，并传播到表单组件的某种

handleChange

方法

您还没有包括所有代码，但是将

visible

和

onVisibleChange

绑定到特定字段看起来很奇怪。通常，

visible

绑定到一个状态布尔值，您可以通过

handleChange

方法设置该布尔值。这就是为什么在“隐藏菜单的方式”示例（底部一列，右栏）中使用类组件而不是函数式组件的原因。

当您说“我不知道如何将菜单绑定到父下拉列表”时，您到底想绑定什么？您正在获得

logSelection（）

输出，是吗？在

onSelect

函数中，您应该处理用户选择，并传播到表单组件的某种

handleChange

方法

---

您还没有包括所有代码，但是将

visible

和

onVisibleChange

绑定到特定字段看起来很奇怪。通常，

visible

绑定到一个状态布尔值，您可以通过

handleChange

方法设置该布尔值。这就是为什么在“隐藏菜单的方式”示例（底部一列，右栏）中使用类组件而不是函数组件的原因。

正如Jesper所提到的，我必须

传播到表单组件的某种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>
  )
}

const menuitable=（道具）=>{
返回(
{props.entries.map（（e，i）=>
{e.displayName}
)}
申请
)
}

和相关下拉列表：

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

<下拉列表
触发器={['click']}
覆盖层={
refetchDataBasedOnCheckboxSelection.bind（props.form.setFieldsValue，e）}
条目={props.fields.itemType.values}
/>
}
>
项目类型

由于可选菜单中存在复选框，因此有一些与

onSelect

多次触发相关的错误，但我相信这超出了问题的范围

---

谢谢

正如杰斯珀所说，我必须

传播到表单组件的某种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>
  )
}

const menuitable=（道具）=>{
返回(
{props.entries.map（（e，i）=>
{e.displayName}
)}
申请
)
}

和相关下拉列表：

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

<下拉列表
触发器={['click']}
覆盖层={
refetchDataBasedOnCheckboxSelection.bind（props.form.setFieldsValue，e）}
条目={props.fields.itemType.values}
/>
}
>
项目类型

由于可选菜单中存在复选框，因此有一些与

onSelect

多次触发相关的错误，但我相信这超出了问题的范围

---

谢谢

我将visible和onVisibleChange绑定到外部值，因为我有几个下拉列表由同一个容器管理。打开下拉列表必须关闭其他下拉列表！我将visible和onVisibleChange绑定到外部值，因为我有几个下拉列表由同一个容器管理。打开下拉列表必须是c