Пользовательское поле управления не отображает <select>параметров - PullRequest
Новая
       12

Пользовательское поле управления не отображает <select>параметров

1 голос
/ 20 февраля 2020

Я пытаюсь реализовать Поле с пользовательским управлением в строгом соответствии с официальным руководством. Но, несмотря на то, что мой код довольно близок к исходному, он отображает пустой элемент <select> с атрибутом options, равным [object Object],[object Object],[object Object], вместо выпадающего меню рендеринга, заполненного моими параметрами: 

const { useState } = React,
      { render } = ReactDOM,
      { Form } = semanticUIReact

const InputsBlock = () => {
  const selectOptions = [
          {key: 'option1', text: 'Option 1', value: 'Option 1'},
          {key: 'option2', text: 'Option 2', value: 'Option 2'},
          {key: 'option3', text: 'Option 3', value: 'Option 3'}
        ],
        fields = [
          {label: 'Param 1', key: 'param1', control: 'Input'},
          {label: 'Param 2', key: 'param2', control: 'Input'},
          {label: 'Param 3', key: 'param3', control: 'Select', options: selectOptions}
        ]

  return (
    <Form.Group widths="equal">
      {
        fields.map(({control,label,key,options}) => (
          <Form.Group inline>
            <Form.Field {...{key,control,label,...(control=='Select' && {options})}} />
          </Form.Group>
        ))
      }
    </Form.Group>
  )
}

const MyForm = () => {
  return (
    <Form>
      <InputsBlock />
    </Form>
  )  
}

render (
  <MyForm />,
  document.getElementById('root')
)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-react/0.88.2/semantic-ui-react.min.js"></script><div id="root" style="margin:20px"></div>

1 Ответ

2 голосов
/ 20 февраля 2020

В вашем массиве полей, управление не является строкой. Вместо этого это должен быть фактический компонент semanti c -ui-реагирует.

Измените «поля» на ниже - 

import { Form, Select, Input } from "semantic-ui-react";

fields = [
  { label: "Param 1", key: "param1", control: Input },
  { label: "Param 2", key: "param2", control: Input },
  {
    label: "Param 3",
    key: "param3",
    control: Select,
    options: selectOptions
  }
];

Вот рабочий код того же самого - https://codesandbox.io/s/optimistic-haslett-glvkf

...