1

我正在尝试使用 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;

谢谢你的帮助！

4

2 回答 2

0

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

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

于 2017-04-25T08:54:44.523 回答
0

正如提到的杰斯珀，我不得不

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

和相关的下拉菜单：

              < 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多次触发相关的错误，但我相信这超出了这个问题的范围。

谢谢！

于 2017-04-25T21:16:41.367 回答