Как отобразить реквизиты в раскрывающемся меню в формах Antd?

Я пытаюсь использовать раскрывающееся меню внутри формы с помощью библиотеки дизайна 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;

Спасибо за вашу помощь!


reactjs forms antd
person hypervillain    schedule 24.04.2017    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Когда вы говорите: «Я не знаю, как привязать меню onSelect к родительскому раскрывающемуся списку», что именно вы хотите привязать? Вы получаете результат logSelection(), не так ли? Именно в функции onSelect вы должны обрабатывать выбор пользователя и распространяться до какого-то handleChange метода компонента формы.

Вы не включили весь код, но привязка visible и onVisibleChange к определенным полям выглядит странно. Обычно visible привязан к логическому состоянию, которое вы устанавливаете с помощью метода handleChange. Вот почему в документах «Способ скрытия меню» Пример (нижний, правый столбец) использует компонент Class вместо Functional.

person Jesper We    schedule 25.04.2017
comment
Я привязал visible и onVisibleChange к внешним значениям, потому что у меня есть несколько раскрывающихся списков, управляемых одним и тем же контейнером. Открытие раскрывающегося списка должно закрыть другие! - person hypervillain; 26.04.2017

arrow_upward
0
arrow_downward

Как упомянул Джеспер, мне пришлось

распространяться до некоторого вида метода handleChange компонента формы

Компонент Antd Form предоставляет метод setFieldsValue, который позволяет устанавливать значения полей и запускает метод onFieldsChangeform.

Это дает что-то вроде:

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 из-за наличия флажков внутри выбираемого меню, но я считаю, что это выходит за рамки этого вопроса.

Спасибо!

person hypervillain    schedule 25.04.2017