Component

Field

Reproduction link

https://riddle.alibaba-inc.com/riddles/27d1ebab

import ReactDOM from 'react-dom';
import React from 'react';
import { Input, Button, Checkbox, Field,Form,Select } from '@alifd/next';

const CheckboxGroup = Checkbox.Group;
const dataSource=[1,2,3];

const MySelect = (props) => {
  return <Select {...props}/>
}


class App extends React.Component {
  
    field = new Field(this, {scrollToFirstError: -10});

    notEmpty(rule, value) {
    if (!value || value.length==0) {
      return Promise.reject("必选");
    } else {
      return Promise.resolve(null);
    }
  }


    render() {
        const init = this.field.init;

        return (<div className="demo">
        <Form field={this.field}>


        <Form.Item>
        <Input
        {...init('input', {
        })} />
        </Form.Item>

        {
          this.field.getValue('input') && 
          <>
         
            <Form.Item>
              <Select
              multiple
              dataSource={dataSource}
              {...init('next_select', {
                  rules: [{validator: this.notEmpty}]
              })} />
            </Form.Item>

              <Form.Item>
              <MySelect
              multiple
              dataSource={dataSource}
              {...init('my_select', {
                  rules: [{validator: this.notEmpty}]
              })} />
            </Form.Item>
          </>
        }

      </Form>
        
            <br/>

            <Button type="primary" onClick={() => {
                this.field.validatePromise().then(({errors, values}) => {
                    console.warn('aaa errors',errors);
                    console.log('aaa values',values)
                });
            }}>validate</Button>
         
        </div>);
    }
}

ReactDOM.render(<App/>, mountNode);

Steps to reproduce

1. Input输入1，点Validate按钮，next_select、my_select为空，校验不通过 => 符合预期
   

2. Input清除，点Validate按钮，next_select、my_select都被Unmount了，不应该校验。
   next_select => 没有校验，符合预期
   my_select => 校验了，不符合预期

next_select是fusion原生组件，my_select只是包装成自定义组件（但里面也是Fusion原生组件）

const MySelect = (props) => {
  return <Select {...props}/>
}

你的组件不支持 ref，需要用 React.forwordRef 包裹下

const MySelect = React.forwordRef((props, ref) => {
  return <Select {...props} ref={ref}/>
})

那最好在文档描述一下这个问题和解法。

但我觉得这样对使用上很不方便，你们再看看，能否改变实现，不要靠ref