[英]Form fields lose focus when input value changes
我正在尝试使用react-jsonschema-form和react-jsonschem-form-conditionals从JSON模式构建带有条件字段的表单 。
我正在渲染的组件是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
库中的问题,因为如果我用<Form>
替换<FormWithConditionals>
,则不会发生问题。
如果我删除处理程序onChange={this.handleFormDataChange}
,输入字段在值改变时不再失去焦点(但删除此处理程序会破坏FormModelInspector
)。
在上面的代码中,如果我删除处理程序onChange={this.handleFormDataChange}
,则表单数据更改时不会更新<FormModelInspector>
。 我不明白为什么这个处理程序是必要的,因为<FormModelInspector>
通过formData
属性传递对表单数据的formData
。 也许是因为对表单数据的每次更改都会导致构造一个新对象,而不是修改同一个对象?
问题非常简单,你在render方法和onChange
处理程序中创建一个FormWithConditionals
组件,你触发重新渲染的setState
,因此创建了一个新的FormWithConditionals
实例,因此它失去了焦点。 您需要将此实例移出render方法,并且可能需要移出组件本身,因为它使用静态值。
作为schema
, uiSchema
和rules
作为道具传递给ConditionalForm
,您可以在constructor
函数中创建FormWithConditionals
的实例并在渲染中使用它
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: []
};
对于遇到同样问题但是使用Hooks的人来说,这里没有一个类:
只需使用在组件外声明的变量,并在useEffect
初始化它。 (不要忘记传递[]
作为第二个参数告诉反应我们不依赖任何变量,复制componentWillMount
效果)
// import ... import Engine from 'json-rules-engine-simplified' import Form from 'react-jsonschema-form' let FormWithConditionals = () => null const MyComponent = (props) => { const { formData, schema, uischema, rules, } = props; useEffect(() => { FormWithConditionals = applyRules(schema, uischema, rules, Engine)(Form) }, []) return ( <FormWithConditionals> <div></div> </FormWithConditionals> ); } export default MyComponent
您是否尝试将function FormModelInspector
声明为箭头函数:
const FormModelInspector = props => (
<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>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.