Javascript 如何从高阶组件引用输入元素

我想从我的HOC访问输入元素。我怎样才能做到这一点

const TextInput = (props) => {  
const allowed = ['readOnly','tabIndex','placeholder'];
const filteredProps = filterProps(props,allowed);

    return (
        <div>
            <label>{props.field.Name}</label>
            <input type="text" ref={props.inputRef}   key={props.field.Id} className="form-control" id={props.field.Id} name={props.field.Name}
                value={props.value}
                onChange={props.onChange}
                onKeyDown={props.onKeyDown}
                {...filteredProps}
            />
        </div>
    );
}
TextInput.propTypes = {
    fieldMetadata: PropTypes.object,
    isValid: PropTypes.bool
}
export default withInputMask(withRequired(withReadOnly(withMinMax(withHidden(TextInput)))));

const TextInput=（props）=>{
允许的常量=['readOnly'，'tabIndex'，'placeholder']；
const filteredrops=filterProps（允许使用道具）；
返回(
{props.field.Name}
);
}
TextInput.propTypes={
fieldMetadata:PropTypes.object，
isValid:PropTypes.bool
}
使用InputMask导出默认值（withRequired（withReadOnly）（withMinMax（withHidden）（TextInput‘‘）’））；

我尝试过一些事情，但这是最新的尝试。 在withInputMask渲染方法中，我插入了以下内容

            return (
                <div>
                    <Component {...this.props} inputRef={el=> this.inputElement=el} isValid={isValid} onChange={this.onChange} placeholder={inputMaskPattern} />
                    {hasErrors && <span className={hasErrors}>{error}</span>}
                </div>

            );
        }
    }
};
export default withInputMask;

返回(
this.inputElement=el}isValid={isValid}onChange={this.onChange}占位符={inputMaskPattern}/>
{hasrerrors&&{error}
);
}
}
};
使用InputMask导出默认值；

当我打开react-dev工具并单击withInputMask组件时，我看到的就是这个

---

以上功能现在可以正常工作。使用当前唯一的问题引用和验证的是，this.inputElement在我的HOC的componentDidMount（）中未定义，这是为什么？上面的问题现在可以正常工作。现在使用引用和验证的唯一问题是，this.inputElement在我的HOC的componentDidMount（）中未定义，这是为什么？