Как сделать поле выбора в реагировать один выбранный и несколько выбранных? - PullRequest
Новая
       21

Как сделать поле выбора в реагировать один выбранный и несколько выбранных?

0 голосов
/ 03 ноября 2019

Я использую этот пакет для создания динамической формы https://www.npmjs.com/package/react-formio?activeTab=readme

Как указано в документации для создания select box

https://formio.github.io/formio.js/app/examples/select.html

Я следую инструкциямно это не работает. Это не дает ожидаемый вывод представления как упоминание в документации. вот мой код

https://codesandbox.io/s/brave-smoke-07qyi

src={{
      display: "form",
      components: [
        {
          type: "select",
          label: "Single Select",
          key: "single",
          placeholder: "Select one",
          data: {
            values: [
              { value: "apple", label: "Apple" },
              { value: "banana", label: "Banana" },
              { value: "pear", label: "Pear" },
              { value: "orange", label: "Orange" }
            ]
          },
          dataSrc: "values",
          defaultValue: "banana",
          template: "<span>{{ item.label }}</span>",
          input: true
        }
      ]
    }}

1 Ответ

2 голосов
/ 03 ноября 2019

Для меня это похоже на проблему с CSS.

Закомментируйте импорт начальной загрузки. 

// import "bootstrap/dist/css/bootstrap.css";

Добавьте приведенный ниже код в раздел head на public/index.html 

 <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/formiojs@latest/dist/formio.full.min.css"
    />

https://codesandbox.io/s/gallant-perlman-v3niz

Чтобы извлечь данные с сервера,

Перейдите к Data tab и выберите Data Source Type как URL. * 1021. *

Укажите Data Source Url и Data Path (путь к массиву в ответе).

В этом случае я использую StarWars API.

https://swapi.co/api/people/

Что следует нижеприведенной спецификации. 

{
    "count": 87, 
    "next": "https://swapi.co/api/people/?page=2", 
    "previous": null, 
    "results": [
        {
            "name": "Luke Skywalker", 
         }
     ]
}

enter image description here

enter image description here

Окончательный код будет выглядеть следующим образом. 

import React from "react";
import ReactDOM from "react-dom";
import { Form } from "react-formio";
import "./styles.css";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Form
    src={{
      display: "form",
      components: [
        {
          type: "select",
          label: "Single Select",
          key: "single",
          placeholder: "Select one",
          data: {
            values: [
              { value: "apple", label: "Apple" },
              { value: "banana", label: "Banana" },
              { value: "pear", label: "Pear" },
              { value: "orange", label: "Orange" }
            ]
          },
          dataSrc: "values",
          defaultValue: "banana",
          template: "<span>{{ item.label }}</span>",
          input: true
        },
        {
          label: "Select",
          mask: false,
          type: "select",
          input: true,
          key: "select2",
          defaultValue: "",
          data: {
            url: "https://swapi.co/api/people/",
            headers: [{ key: "", value: "" }],
            values: []
          },
          dataSrc: "url",
          template: "<span>{{ item.name }}</span>",
          selectValues: "results",
          disableLimit: false,
          searchField: "",
          clearOnRefresh: false,
          reference: false
        },
        {
          type: "button",
          label: "Submit",
          key: "submit",
          disableOnInvalid: true,
          theme: "primary",
          input: true
        }
      ]
    }}
    onSubmit={i => {
      console.log(i);
    }}
  />,

  // <Form src="https://peb3z.sse.codesandbox.io/abc" onSubmit={(i)=>{console.log(i)}} />,
  rootElement
);
...