Библиотека formbuilder — это инструмент, используемый для динамического создания HTML-форм и управления ими при веб-разработке. Хотя существует несколько библиотек для создания форм, я приведу пример с использованием популярной библиотеки под названием «react-jsonschema-form».

Вот некоторые распространенные методы, предоставляемые библиотекой React-jsonschema-form:

1. Форма: этот компонент используется для отображения формы на основе схемы JSON и схемы пользовательского интерфейса.

import React from 'react';
import Form from 'react-jsonschema-form';
const schema = {
  title: 'Example Form',
  type: 'object',
  properties: {
    name: { type: 'string' },
    age: { type: 'number' },
  },
};
const MyForm = () => {
  const handleSubmit = (formData) => {
    console.log(formData);
  };
  return (
    <Form schema={schema} onSubmit={handleSubmit} />
  );
};
export default MyForm;

1. Поле: этот компонент представляет поле формы и предоставляет возможности настройки.

import React from 'react';
import { Field } from 'react-jsonschema-form';
const MyCustomField = (props) => {
  const { id, label, onChange, onBlur, onFocus, value } = props;
  return (
    <div>
      <label htmlFor={id}>{label}</label>
      <input
        id={id}
        onChange={onChange}
        onBlur={onBlur}
        onFocus={onFocus}
        value={value}
      />
    </div>
  );
};
const schema = {
  type: 'object',
  properties: {
    name: { type: 'string' },
    age: { type: 'number' },
  },
};
const uiSchema = {
  name: {
    'ui:field': 'customField',
  },
};
const MyForm = () => {
  const handleSubmit = (formData) => {
    console.log(formData);
  };
  const fields = {
    customField: MyCustomField,
  };
  return (
    <Form
      schema={schema}
      uiSchema={uiSchema}
      fields={fields}
      onSubmit={handleSubmit}
    />
  );
};
export default MyForm;

Эти примеры демонстрируют использование компонента Formдля создания формы на основе схемы JSON и компонента Fieldдля определения настраиваемых полей формы.