Question

我正在尝试使用Ant设计库在表单中使用下拉菜单。我没有设法将道具映射到复选框字段。更改（显然）不是字段装饰器，因为我不知道如何将菜单onSelect绑定到父下拉列表。

引用文档：

您可以通过antd.Menu获取菜单列表，并根据需要为其选择一个回调函数。

但它不会绑定到道具。知道如何管理该用例吗？

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

当你说＆＃34;我不知道如何将菜单onSelect绑定到父下拉列表＆＃34;你想绑定到底是什么？您收到logSelection()输出，不是吗？它应该在onSelect函数中处理用户选择，并传播到表单组件的某种handleChange方法。

您还没有包含所有代码，但visible和onVisibleChange与特定字段的绑定看起来很奇怪。通常visible绑定到您从handleChange方法设置的状态布尔值。这就是为什么在docs中，＆＃34;隐藏菜单的方式＆＃34; 示例（底部一列，右列）使用Class组件而不是Functional。

Answer 2

如上所述Jesper，我不得不

传播到表单组件的某种handleChange方法

Antd Form组件提供了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>
  )
}

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

2 个答案: