javascript - 如何在反应单选和多选中制作选择框？

Question

我正在使用这个包来生成动态表单 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
        }
      ]
    }}

Answer 1

这对我来说似乎是一个 CSS 问题。

注释掉引导导入。

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

head在on 部分添加以下代码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。

指定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", 
         }
     ]
}

最终代码如下所示。

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
);