如何解决蚂蚁设计4.5.2 validateFields无法通过HOC中的forwardRef工作
因此,我正在尝试将formRef从父级转发到子级,以在child中运行方法validateFields,但不会运行。我确实得到了一个承诺,但是在这种情况下它从未得到解决,并且它从未记录过字段。那么通过前向引用传递时,如果没有错误,validateFields是否不会传递结果?
我只想在表单验证通过时调用API。那我该怎么办呢?
这是我的子组件。在其中我无法获取222222的日志。
import {Form} from 'antd';
class Child extends Component {
constructor(props) {
super(props);
this.state = {
phone1: null,phone2: null,};
}
updateText = (key) => (e) => {
this.setState({[key]: String(value),key},() => this.validate(key,value));
};
fetchPhone = async (key) => {
console.log('---- XXXXXXXXXXXXXXXXXXXXX ----');
//API REQUEST
};
validate = (key,value) => {
if (value.length === 10) {
console.log('this.props ----',this.props);
console.log('---- 11111111111111111 ----');
this.props.form.current
.validateFields([key])
.then((values) => {
console.log('---- 2222222222222222 ----');
console.log('values ----',values);
this.fetchPhone(key);
})
.catch((info) => {
console.log('---- 33333333333333333 ----');
console.log('Validate Failed:',info);
});
}
};
render() {
return (
<div className="flex flex-2 row">
<Form.Item
name="phone1"
label="First Driver Phone"
rules={[{validator: isValidPhone}]}>
<Input
placeholder="Enter First Driver Phone"
onChange={this.updateText('phone1')}
maxLength={10}
/>
</Form.Item>
<Form.Item
name="phone2"
label="Second Driver Phone"
rules={[{validator: isValidPhone}]}>
<Input
placeholder="Enter Second Driver Phone"
onChange={this.updateText('phone2')}
maxLength={10}
/>
</Form.Item>
</div>
);
}
}
const WrappedComponent = React.forwardRef((props,ref) => {
return <Child {...props} form={ref} />;
});
export default WrappedComponent;
这是我的父组件
class Parent extends Component {
constructor(props) {
super(props);
this.state = {};
this.formRef = React.createRef();
}
render() {
return (
<>
<Modal
centered
visible={this.props.visible}
onCancel={this.props.close}
destroyOnClose={true}
className="edit-trip-vehicle-modal"
width={'70%'}>
{/*------------------------ FORM ----------------------------*/}
<Form name="ParentForm" ref={this.formRef} layout={'vertical'}>
<Child ref={this.formRef} />
</Form>
</Modal>
</>
);
}
}
export default Parent;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。