我正在尝试使用表单中的规则。项目，但由于某种原因它不支持
注意：该数字不支持，但这不是问题规则功能根本不支持。注意：我认为因为它渲染了很多，这就是规则没有得到应用的原因。
解决问题的任何帮助都会很棒。
- 这是一个表单组件代码
import React from 'react';
import { Form, Button } from 'antd';
import { component as Template } from '@ivoyant/component-template';
class InputFormComponent extends React.Component {
state = {
formData: {},
};
enableInputFocus = (State, Props) => {
const empty = {};
const isObject = x => Object(x) === x;
const diff1 = (left = {}, right = {}, rel = 'left') =>
Object.entries(left)
.map(([k, v]) =>
isObject(v) && isObject(right[k])
? [k, diff1(v, right[k], rel)]
: right[k] !== v
? [k, { [rel]: v }]
: [k, empty]
)
.reduce(
(acc, [k, v]) => (v === empty ? acc : { ...acc, [k]: v }),
empty
);
const merge = (left = {}, right = {}) =>
Object.entries(right).reduce(
(acc, [k, v]) =>
isObject(v) && isObject(left[k])
? { ...acc, [k]: merge(left[k], v) }
: { ...acc, [k]: v },
left
);
const diff = (x = {}, y = {}) =>
merge(diff1(x, y, 'left'), diff1(y, x, 'right'));
const key = Object.keys(diff(State, Props))[0];
for (const property in Props) {
if (key == property) {
Props[property].focus = true;
} else {
Props[property].focus = false;
}
}
return Props;
};
onFinish = values => {
const { formData } = this.state;
global.console.log('Success: formData :', formData);
};
getDataFromFormItem = values => {
const { formData } = this.state;
const updatedValues = this.enableInputFocus(formData, values);
this.setState({ formData: { ...formData, ...updatedValues } });
};
onFinishFailed = errorInfo => {
global.console.log('Failed:', errorInfo);
};
render() {
const { children, properties } = this.props;
const {
submitButtonText,
formClassName,
submitButtonClassNmae,
} = properties;
const { formData } = this.state;
const childComponent = React.Children.map(children, child => {
return React.cloneElement(child, {
sendDataToForm: this.getDataFromFormItem,
updateFormData: this.updateFormData,
values: { ...formData },
});
});
return (
<div>
<Form
className={formClassName && formClassName}
onFinish={this.onFinish}
onFinishFailed={this.onFinishFailed}
>
{childComponent}
<Form.Item>
<Button
type="primary"
htmlType="submit"
className={
submitButtonClassNmae && submitButtonClassNmae
}
>
{submitButtonText && submitButtonText}
</Button>
</Form.Item>
</Form>
</div>
);
}
}
export default InputFormComponent;
- 下面是 Input 字段的代码，这是一个完全不同的组件：
import React from 'react';
import { Input, Form } from 'antd';
class InputComponent extends React.Component {
state = {
formItemData: {},
};
componentDidMount() {
const { values } = this.props;
for (const property in values) {
if (values[property].focus === true) {
this[property] && this[property].focus();
}
}
/**
* Bellow code is use when we are not passing input component as a direct child of Form component
*/
if (this.props.parentProps)
for (const property in this.props.parentProps.values) {
if (this.props.parentProps.values[property].focus === true) {
this[property] && this[property].focus();
}
}
/**
* In Bellow code true condition is exected when we are not passing input component as a direct child of Form component
*/
this.props.parentProps
? this.setState({
formItemData: { ...values, ...this.props.parentProps.values },
})
: this.setState({ formItemData: { ...values } });
}
handleOnChange = event => {
const { formItemData } = this.state;
const { id, value } = event.target;
const ID = id;
const object = {};
object[ID] = {
VALUE: value,
focus: false,
};
this.setState(
{
formItemData: { ...formItemData, ...object },
},
() => {
this.props.sendDataToForm &&
this.props.sendDataToForm(this.state.formItemData);
/**
* Bellow code is use when we are not passing input component as a direct child of Form component
*/
this.props.parentProps &&
this.props.parentProps.sendDataToForm &&
this.props.parentProps.sendDataToForm(
this.state.formItemData
);
}
);
};
render() {
const { id, className } = this.props.properties;
const { values, children } = this.props;
const { formItemData } = this.state;
const { inputFieldsConfiguration } = this.props.properties;
const childComponent = React.Children.map(children, child => {
return React.cloneElement(child, {
parentProps: { ...this.props },
});
});
return (
<div>
<div className={className && className}>
{inputFieldsConfiguration &&
// eslint-disable-next-line complexity
inputFieldsConfiguration.map(data => {
return (
<div
className={data.itemAndInputClassName}
key={data.id && data.id}
>
<div className={data.labalClassName}>
{data.label && data.label}
</div>
<Form.Item
key={data.id}
hasFeedback
name={data.id}
help={data.help && data.help}
className={
data.formItemClassName &&
data.formItemClassName
}
rules={[
{
type: "url",
}
]}
>
<Input
ref={input => {
this[data.id] = input;
}}
placeholder={
data.placeholder &&
data.placeholder
}
id={data.id && data.id}
disabled ={data.disabled && data.disabled }
value={
formItemData &&
formItemData[data.id] &&
formItemData[data.id].ID === ''
? values &&
values[data.id] &&
values[data.id].VALUE
: formItemData &&
formItemData[data.id] &&
formItemData[data.id]
.VALUE
}
className={
data.inputItemClassName &&
data.inputItemClassName
}
onChange={e =>
this.handleOnChange(e)
}
/>
</Form.Item>
</div>
);
})}
</div>
{childComponent}
</div>
);
}
}
export default InputComponent;