how to make select box in react single selected and mulitple selected?

问题

I am using this package to generate dynamic form https://www.npmjs.com/package/react-formio?activeTab=readme

As mentioned in the documentation to create select box

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

I follow the steps but it is not working.It is not giving expected view output as mention in documentation. here is my code

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:

This looks like a CSS issue to me.

Comment out the bootstrap import.

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

Add the below code in head section 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

To fetch data from the server,

Navigate to Data tab and select Data Source Type as URL.

Specify the Data Source Url and the Data Path (path to the array in response).

In this case I'm using StarWars API.

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

Which follows the below spec.

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

The final code would look like below.

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

来源：https://stackoverflow.com/questions/58678638/how-to-make-select-box-in-react-single-selected-and-mulitple-selected