javascript - 密码字段仅在输入用户名后才显示？

Question

我正在使用下面的包动态生成表单：

https://www.npmjs.com/package/react-formio

我login-form使用此链接 生成了一个简单的https://codesandbox.io/s/cra-react-formio-iy8lz

构建后，它会创建一个 JSON。然后，我使用该 JSON 生成一个表单。

它会创建与预期相同的表单，但我希望仅在用户输入他/她的用户 ID/名字/名字时才显示密码字段

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

见更新

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