Настраиваемый стиль для формы, созданной с использованием формы реакции-json

Question

Я пытаюсь создать форму, используя схему-форму response-json. Я новичок в пользовательских шаблонах для того же. Я хотел бы, чтобы все виджеты в форме в одной строке. Как это сделать?

Я попробовал следующее (компонент), который был из пользовательского объекта с их сайта, но не смог получить желаемый результат.

import React from 'react';

import Form from 'react-jsonschema-form';

/* this is my schma*/
const AdHocCheckSchema = {
    title: "search",

    type: "object",

    required: ["searchKeyword", "country"],

    properties: {

        searchKeyWord: {

            type: "string",

            title: "Search Keyword"

        },
        country: {
            type: "string",

            title: "country",

            enum: [
                "a",
                "b"
            ],
            enumNames: [
                "a",
                "b"
            ]
        }
    }
};

/*this is the ui schema*/

const adHocCheckUiSchema = {

    "ui:order": [
        "searchKeyWord",
        "country"
    ],
    "country": {
        "ui:widget": "select"
    }

};

function CustomTemplate(props) 
{    
   return (
        <div>
            {props.title} 

            {props.description}

            {props.properties.map(
             element => 
             <div className="property-wrapper">{element.content}</div>)}
        </div>
    );
}

const AdHocCheckComponent = () => {
    return (

            <Form
                className="tp-adhoccheck__horizontal"
                schema={AdHocCheckSchema}
                uiSchema={adHocCheckUiSchema}
                CustomTemplate={CustomTemplate}
            />


    );
};

export default AdHocCheckComponent;

я понятия не имею, как сделать поле ввода, выбрать виджет, а также кнопку в той же строке. На данный момент это выглядит как в форме по умолчанию одна строка за другой.

Answer 1

Вы можете настроить внешний вид каждого поля с помощью их шаблонов. Учитывая, что форма отправляется как объект, вам нужно настроить ObjectFieldTemplate: https://react-jsonschema-form.readthedocs.io/en/latest/advanced-customization/

Фактически, если вы зайдете на их игровую площадку ( https://mozilla-services.github.io/react-jsonschema-form/, ссылка на вкладку "Пользовательский объект" сверху), вы увидите все поля в одной строке. (если ваше разрешение экрана достаточно высокое, иначе они будут перенесены в последующие строки). Их исходный код для этого эффекта (через пользовательский компонент ObjectFieldTemplate) находится здесь: https://github.com/mozilla-services/react-jsonschema-form/blob/master/playground/samples/customObject.js

function ObjectFieldTemplate({ TitleField, properties, title, description }) {
  return (
    <div>
      <TitleField title={title} />
      <div className="row">
        {properties.map(prop => (
          <div
            className="col-lg-2 col-md-4 col-sm-6 col-xs-12"
            key={prop.content.key}>
            {prop.content}
          </div>
        ))}
      </div>
      {description}
    </div>
  );
}

Answer 2

Я использую машинопись, и в моем случае вот ответ

      function ObjectFieldTemplate(props: ObjectFieldTemplateProps) {
    return (
      <div>
        <h3>{props.title}</h3>
        <p>{props.description}</p>
        {props.properties.map((element) => (
          <div className='property-wrapper'>{element.content}</div>
        ))}
      </div>
    );
  }

<Form
      formData={formState}
      schema={schema as JSONSchema7}
      transformErrors={transformErrors}
      onChange={(e) => setFormState(e.formData)}
      validator={validator}
      onSubmit={() => onSubmit}
      templates={{ ObjectFieldTemplate }}
    >

Ссылка: https://react-jsonschema-form.readthedocs.io/en/latest/advanced-customization/custom-templates/

Answer 3

Я использовал customFieldTemplate и flex-box и мог сделать это подряд

export const customFieldTemplate = (props) => {
    const {id, label, classNames, required, errors, children} = props;
    return (
        <div className={classNames}>
            <label className="field_label" htmlFor={id}>
                <span className="required-field">
                    {required ? '*' : null}
                </span>
                {label}
            </label>
            {children}
            {errors}
        </div>
    );
};