Поля формы теряют фокус при изменении входных значений

Я пытаюсь создать форму с условными полями из схемы JSON, используя выражения реакции-jsonschema-form и response-jsonschem-form-conditions.

Компоненты, которые я FormWithConditionals являются FormWithConditionals и FormModelInspector. Последний - очень простой компонент, который показывает модель формы.

Соответствующий исходный код:

import React from 'react';
import PropTypes from 'prop-types';
import Engine from "json-rules-engine-simplified";
import Form from "react-jsonschema-form";
import applyRules from "react-jsonschema-form-conditionals";

function FormModelInspector (props) {

  return (
    <div>
      <div className="checkbox">
        <label>
          <input type="checkbox" onChange={props.onChange} checked={props.showModel}/>
          Show Form Model
        </label>
      </div>
      {
        props.showModel && <pre>{JSON.stringify(props.formData, null, 2)}</pre>
      }
    </div>
  )
}

class ConditionalForm extends React.Component {

  constructor (props) {
    super(props);
    this.state = {
      formData: {},
      showModel: true
    };
    this.handleFormDataChange = this.handleFormDataChange.bind(this);
    this.handleShowModelChange = this.handleShowModelChange.bind(this);
  }

  handleShowModelChange (event) {
    this.setState({showModel: event.target.checked});
  }

  handleFormDataChange ({formData}) {
    this.setState({formData});
  }

  render () {
    const schema = {
      type: "object",
      title: "User form",
      properties: {
        nameHider: {
          type: 'boolean',
          title: 'Hide name'
        },
        name: {
          type: 'string',
          title: 'Name'
        }
      }
    };

    const uiSchema = {};

    const rules = [{
      conditions: {
        nameHider: {is: true}
      },
      event: {
        type: "remove",
        params: {
          field: "name"
        }
      }
    }];

    const FormWithConditionals = applyRules(schema, uiSchema, rules, Engine)(Form);

    return (
      <div className="row">
        <div className="col-md-6">
          <FormWithConditionals schema={schema}
                uiSchema={uiSchema}
                formData={this.state.formData}
                onChange={this.handleFormDataChange}
                noHtml5Validate={true}>
          </FormWithConditionals>
        </div>
        <div className="col-md-6">
          <FormModelInspector formData={this.state.formData}
                              showModel={this.state.showModel}
                              onChange={this.handleShowModelChange}/>
        </div>
      </div>
    );
  }
}

ConditionalForm.propTypes = {
  schema: PropTypes.object.isRequired,
  uiSchema: PropTypes.object.isRequired,
  rules: PropTypes.array.isRequired
};

ConditionalForm.defaultProps = {
  uiSchema: {},
  rules: []
};

Однако каждый раз, когда я изменяю значение поля, поле теряет фокус. Я подозреваю, что причина проблемы - это что-то в библиотеке react-jsonschema-form-conditionals, поскольку, если я заменяю <FormWithConditionals> на <Form>, проблема не возникает.

Если я onChange={this.handleFormDataChange} обработчик onChange={this.handleFormDataChange} поле ввода больше не теряет фокус при изменении значения (но удаление этого обработчика прерывает FormModelInspector).

В сторону

В приведенном выше коде, если я onChange={this.handleFormDataChange} обработчик onChange={this.handleFormDataChange}, <FormModelInspector> не обновляется при изменении данных формы. Я не понимаю, почему этот обработчик необходим, потому что <FormModelInspector> передается ссылка на данные формы через атрибут formData. Возможно, это потому, что каждое изменение данных формы приводит к созданию нового объекта, а не к модификации одного и того же объекта?

Ответ 1

Проблема довольно проста: вы создаете компонент FormWithConditionals в вашем методе рендеринга, а в обработчике onChange вы setState который запускает повторную визуализацию, и, следовательно, создается новый экземпляр FormWithConditionals и, следовательно, он теряет фокус. Вам нужно перенести этот экземпляр из метода render и, возможно, из самого компонента, так как он использует статические значения.

В качестве schema uiSchema и rules передаются как реквизиты для ConditionalForm, вы можете создать экземпляр FormWithConditionals в функции constructor и использовать его в визуализации как это

    import React from 'react';
    import PropTypes from 'prop-types';
    import Engine from "json-rules-engine-simplified";
    import Form from "react-jsonschema-form";
    import applyRules from "react-jsonschema-form-conditionals";

    function FormModelInspector (props) {

      return (
        <div>
          <div className="checkbox">
            <label>
              <input type="checkbox" onChange={props.onChange} checked={props.showModel}/>
              Show Form Model
            </label>
          </div>
          {
            props.showModel && <pre>{JSON.stringify(props.formData, null, 2)}</pre>
          }
        </div>
      )
    }


    class ConditionalForm extends React.Component {

      constructor (props) {
        super(props);
        this.state = {
          formData: {},
          showModel: true
        };
        const { schema, uiSchema, rules } = props;
        this.FormWithConditionals = applyRules(schema, uiSchema, rules, Engine)(Form);
        this.handleFormDataChange = this.handleFormDataChange.bind(this);
        this.handleShowModelChange = this.handleShowModelChange.bind(this);
      }

      handleShowModelChange (event) {
        this.setState({showModel: event.target.checked});
      }

      handleFormDataChange ({formData}) {
        this.setState({formData});
      }

      render () {
        const FormWithConditionals = this.FormWithConditionals;
        return (
          <div className="row">
            <div className="col-md-6">
              <FormWithConditionals schema={schema}
                    uiSchema={uiSchema}
                    formData={this.state.formData}
                    onChange={this.handleFormDataChange}
                    noHtml5Validate={true}>
              </FormWithConditionals>
            </div>
            <div className="col-md-6">
              <FormModelInspector formData={this.state.formData}
                                  showModel={this.state.showModel}
                                  onChange={this.handleShowModelChange}/>
            </div>
          </div>
        );
      }
    }

    ConditionalForm.propTypes = {
      schema: PropTypes.object.isRequired,
      uiSchema: PropTypes.object.isRequired,
      rules: PropTypes.array.isRequired
    };

    ConditionalForm.defaultProps = {
      uiSchema: {},
      rules: []
    };

В сторону

Ответ 1

Ответ 2