被antdesign中Form包装后的子组件,通过refs获取后无法调用其实例方法

Question

react初学者，有个问题不清楚：
点击按钮，执行this.calcAccount();

1.通过refs获取到子组件，并调用其实例方法test(),为什么会undefined呢？
注意点:此子组件是被Form.create()(ElectricityTemp)包装过，这是antdesign中的From组件提供的方法。
以下两个组件，去除了不必要的code.

父组件:ElectricityFees.tsx

class ElectricityFees extends React.Component<Iprops, Istate> {

    constructor(props: any) {
        super(props);
        this.calcAccount = this.calcAccount.bind(this);
    }

    public calcAccount: (e: any) => void = (e: any) => {
        const self = this;
        this.props.rooms.forEach((_:object, i:number) => {
            const a = self[`refs${i}`].current; **// 这里a是子组件，可是为什么没有test方法?**
            a.test();
        });
    };


    public render() {
        const key: string = 'name';
        this.props.rooms.forEach((_:object, i:number) => {
            this[`refs${i}`] = React.createRef();
        });

        return (

            <React.Fragment>
                <Row gutter={24}>
                    {
                        this.props.rooms.map((_: object, i: number) => {
                            return (
                                <Col className="gutter-row" span={6} key={i}>
                                    <WrappedTimeRelatedForm name={_[key]} ref={this[`refs${i}`]}/>
                                </Col>
                            )
                        })
                    }
                </Row>
                <Button onClick={this.calcAccount}>结算</Button>
            </React.Fragment>
        )
    }
}

export default ElectricityFees;

子组件：WrappedTimeRelatedForm.tsx

class ElectricityTemp extends React.Component<Iprops, any> {

     public test(){
            console.log(this.props.name);
     }
    public render() {
        return (
            <Form>
                ...
            </Form>
        );
    }
}


const WrappedTimeRelatedForm = Form.create()(ElectricityTemp);

export default WrappedTimeRelatedForm;

Answer 1

name={`${_}${key}`}

Answer 2

请问解决了吗？我也遇到这个问题，父组件不能调用子组件form的方法

Answer 3

对于你给的代码：
不要将this定义为其他的东西，没必须。jQuery的那套需要丢掉了。
this[`refs${i}`].test()
就可以了。
对于refs我想多写点：
首先：在stateless组件中是无法使用refs的。
其实，在万不得意的情况下尽量不要使用refs。
父组件调用子组件的方法是要获取子组件的什么呢？
如果是数据，那么父组件给子组件一个回调就可以了。
如果要执行子组件的方法，那么可以将子组件包在父组件中，这样通过高阶组件实现,例如：

const Parent = () => {};

const Children = ({children}) => {
    return (
        <Fragment>
         //子组件内容
         {children}
        </Fragment>
    )
}

使用：

<Children>
    <Parent />
</Children>