我正在使用以下程序包动态生成表单:
https://www.npmjs.com/package/react-formio
我使用此链接生成了一个简单的login-form
https://codesandbox.io/s/cra-react-formio-iy8lz
构建后,它将创建一个JSON。 然后,我使用该JSON生成表单。
它创建的表单与预期的相同,但是我只希望用户输入密码时显示密码字段 userid / firstname / firstfield
https://codesandbox.io/s/brave-smoke-07qyi
ReactDOM.render(
<Form
src={{
_id: "5b8c14217f43cc293958e2bc",
type: "form",
tags: [],
owner: "553dbfc08d22d5cb1a7024f2",
components: [
{
label: "First Name",
placeholder: "Enter First Name",
key: "firstName",
type: "textfield",
input: true
},
{
label: "Password",
placeholder: "Enter password",
tableView: false,
key: "password",
type: "password",
input: true,
protected: true
},
{
type: "button",
label: "Submit",
key: "submit",
disableOnInvalid: true,
input: true
}
]
}}
onSubmit={i => {
console.log(i);
}}
/>,
// <Form src="https://peb3z.sse.codesandbox.io/abc" onSubmit={(i)=>{console.log(i)}} />,
rootElement
);
答案 0 :(得分:1)
您必须使用json条件:
https://codesandbox.io/s/angry-sinoussi-jswhr
import React from "react";
import ReactDOM from "react-dom";
import { Form } from "react-formio";
import "./styles.css";
import "bootstrap/dist/css/bootstrap.css";
const rootElement = document.getElementById("root");
ReactDOM.render(
<Form
src={{
_id: "5b8c14217f43cc293958e2bc",
type: "form",
tags: [],
owner: "553dbfc08d22d5cb1a7024f2",
components: [
{
label: "First Name",
placeholder: "Enter First Name",
key: "firstName",
type: "textfield",
input: true
},
{
label: "Last Name",
placeholder: "Enter Last Name",
key: "lastName",
type: "textfield",
input: true
},
{
label: "Password",
placeholder: "Enter password",
tableView: false,
key: "password",
type: "password",
input: true,
protected: true,
conditional: {
json: {
and: [
{
"!=": [
{
var: "data.firstName"
},
""
]
},
{
"!=": [
{
var: "data.lastName"
},
""
]
}
]
}
}
},
{
type: "button",
label: "Submit",
key: "submit",
disableOnInvalid: true,
input: true
}
]
}}
onSubmit={i => {
console.log(i);
}}
/>,
// <Form src="https://peb3z.sse.codesandbox.io/abc" onSubmit={(i)=>{console.log(i)}} />,
rootElement
);