作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用这个包来生成动态表单 https://www.npmjs.com/package/react-formio?activeTab=readme
如文档中所述创建选择框
https://formio.github.io/formio.js/app/examples/select.html
我按照步骤操作,但它不起作用。它没有提供文档中提到的预期 View 输出。这是我的代码
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
}
]
}}
最佳答案
对我来说这看起来像是 CSS 问题。
注释掉 Bootstrap 导入。
// import "bootstrap/dist/css/bootstrap.css";
在public/index.html
的head
部分添加以下代码
<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
要从服务器获取数据,
导航到数据选项卡
并选择数据源类型
作为URL
。
指定数据源 URL
和数据路径
(响应中数组的路径)。
在本例中,我使用 StarWars API。
遵循以下规范。
{
"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
);
关于javascript - 如何在单选和多选中做出选择框?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58678638/
我是一名优秀的程序员,十分优秀!