蚂蚁设计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 (将#修改为@）