在更改时使用 JsonSchemaForm 来更新字段的内容

Question

我正在尝试使用 JsonSchema-Form 组件，但是我运行在尝试创建一个表单时遇到了问题，在第一个下拉列表中选择一个选项后，应该会出现一个辅助下拉列表并给他用户可以根据他在第一个下拉菜单中通过 API 调用选择的内容来选择不同的选项集。

问题是，在阅读了文档和分别找到 here and here 的一些示例后，我仍然不知道我在第一个选项中选择的任何内容如何影响第二个下拉列表。这是我现在拥有的示例：

应该通过 api 调用在第一个和第二个下拉列表中显示的 Jsons 信息：

Groups: [
{id: 1,
name: Group1}
{id: 2,
name: Group2}
]
User: [User1.1,User1.2,User2.1,User2.2,User3.1,User3.2, ....]

如果用户选择第一组，那么我必须使用以下 api 调用来获取用户类型，这让我得到了 USER json.

调用 JSonChemaForm 的组件

render(){
 return(
          <JsonSchemaForm
            schema={someSchema(GroupOptions)}
            formData={this.state.formData}
            onChange={{}}
            uiSchema={someUiSchema()}
            onError={() => {}}
            showErrorList={false}
            noHtml5Validate
            liveValidate
          > 
 )
}

架构文件内容：

export const someSchema = GroupOptions => ({
  type: 'object',
  required: [
    'groups', 'users',
  ],
  properties: {
    groups: {
      title: 'Group',
      enum: GroupOptions.map(i=> i.id),
      enumNames: GroupOptions.map(n => n.name),
    },
    users: {
      title: 'Type',
      enum: [],
      enumNames: [],
    },
  },
});

export const someUISchema = () => ({
  groups: {
    'ui:autofocus': true,
    'ui:options': {
      size: {
        lg: 15,
      },
    },
  },
  types: {
    'ui:options': {
      size: {
        lg: 15,
      },
    },
  },

});

我不太确定如何继续这个以及如何使用 Onchange 方法来做我想做的事情。

Answer 1

我找到了你的解决方法problem.There是一个类似的demo，可以在react-jsonschema-form-layout中解决。 1.定义LayoutField，这是react-jsonschema-form-layout中demo的一部分。为了方便大家，我post把代码放在这里。创建 layoutField.js.:

import React from 'react'
import ObjectField from 'react-jsonschema-form/lib/components/fields/ObjectField'
import { retrieveSchema } from 'react-jsonschema-form/lib/utils'
import { Col } from 'react-bootstrap'

export default class GridField extends ObjectField {
    state = { firstName: 'hasldf' }
    render() {
        const {
            uiSchema,
            errorSchema,
            idSchema,
            required,
            disabled,
            readonly,
            onBlur,
            formData
        } = this.props
        const { definitions, fields, formContext } = this.props.registry
        const { SchemaField, TitleField, DescriptionField } = fields
        const schema = retrieveSchema(this.props.schema, definitions)
        const title = (schema.title === undefined) ? '' : schema.title

        const layout = uiSchema['ui:layout']

        return (
            <fieldset>
                {title ? <TitleField
                    id={`${idSchema.$id}__title`}
                    title={title}
                    required={required}
                    formContext={formContext}/> : null}
                {schema.description ?
                    <DescriptionField
                        id={`${idSchema.$id}__description`}
                        description={schema.description}
                        formContext={formContext}/> : null}
                {
                    layout.map((row, index) => {
                        return (
                            <div className="row" key={index}>
                                {
                                    Object.keys(row).map((name, index) => {
                                        const { doShow, ...rowProps } = row[name]
                                        let style = {}
                                        if (doShow && !doShow({ formData })) {
                                            style = { display: 'none' }
                                        }
                                        if (schema.properties[name]) {
                                            return (
                                                <Col {...rowProps} key={index} style={style}>
                                                    <SchemaField
                                                        name={name}
                                                        required={this.isRequired(name)}
                                                        schema={schema.properties[name]}
                                                        uiSchema={uiSchema[name]}
                                                        errorSchema={errorSchema[name]}
                                                        idSchema={idSchema[name]}
                                                        formData={formData[name]}
                                                        onChange={this.onPropertyChange(name)}
                                                        onBlur={onBlur}
                                                        registry={this.props.registry}
                                                        disabled={disabled}
                                                        readonly={readonly}/>
                                                </Col>
                                            )
                                        } else {
                                            const { render, ...rowProps } = row[name]
                                            let UIComponent = () => null

                                            if (render) {
                                                UIComponent = render
                                            }

                                            return (
                                                <Col {...rowProps} key={index} style={style}>
                                                    <UIComponent
                                                        name={name}
                                                        formData={formData}
                                                        errorSchema={errorSchema}
                                                        uiSchema={uiSchema}
                                                        schema={schema}
                                                        registry={this.props.registry}
                                                    />
                                                </Col>
                                            )
                                        }
                                    })
                                }
                            </div>
                        )
                    })
                }</fieldset>
        )
    }
}

文件中可以定义doShow 属性来定义是否显示另一个组件。 Next.Define JsonChemaForm 中的 isFilled 函数

const isFilled = (fieldName) => ({ formData }) => (formData[fieldName] && formData[fieldName].length) ? true : false

第三，选择第一个下拉菜单后，会出现第二个下拉菜单

import LayoutField from './layoutField.js'
const  fields={
   layout: LayoutField
}
const uiSchema={
    "ui:field": 'layout',
    'ui:layout': [
        {
            groups: {
                'ui:autofocus': true,
                'ui:options': {
                   size: {
                      lg: 15,
                 },
              },
            }
        },
        {
            users: {
                'ui:options': {
                    size: {
                        lg: 15,
                    },
                },
                doShow: isFilled('groups')
            }
        }
    ]
}
...
render() {
    return (
        <div>
            <Form
                schema={schema}
                uiSchema={uiSchema}
                fields={fields}
            />
        </div>
    )
}

在更改时使用 JsonSchemaForm 来更新字段的内容

Using JsonSchemaForm on change to update field's content

javascript

reactjs

react-jsonschema-forms