Я пытаюсь создать форму с условными полями из схемы 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
. Возможно, это потому, что каждое изменение данных формы приводит к созданию нового объекта, а не к модификации одного и того же объекта?