如何使选择框反应单选和多选? [英] how to make select box in react single selected and mulitple selected?

问题描述

我正在使用此软件包生成动态表格

最终代码如下所示.

  import从反应"中反应；从"react-dom"导入ReactDOM；从"react-formio"导入{Form}；导入"./styles.css"；const rootElement = document.getElementById("root");ReactDOM.render(<表格src = {{显示:表单"，组件: [{类型:选择"，标签:单选"，关键:单"，占位符:选择一个"，数据: {值:[{值:苹果"，标签:苹果"}，{值:香蕉"，标签:香蕉"}，{值:梨"，标签:梨"}，{值:橙色"，标签:橙色"}]}，dataSrc:值"，defaultValue:香蕉"，模板:< span> {{item.label}}</span>"，输入:真}，{标签:选择"，遮罩:假，类型:选择"，输入:true，键:"select2"，默认值: ""，数据: {网址:"https://swapi.co/api/people/"，标头:[{键:"，值:"}]，值:[]}，dataSrc:网址"，模板:< span> {{item.name}}</span>"，selectValues:结果"，disableLimit:否，searchField:"，clearOnRefresh:否，参考:假}，{类型:按钮"，标签:提交"，关键:提交"，disableOnInvalid:true，主题:主要"，输入:真}]}}onSubmit = {i =>{console.log(i);}}/> ;，//< Form src ="https://peb3z.sse.codesandbox.io/abc" onSubmit = {(i)=> {console.log(i)}}/> ;，rootElement); 

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
        }
      ]
    }}

解决方案

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

这篇关于如何使选择框反应单选和多选?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！