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

Question

我想从我的 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)))));

我已经尝试了一些东西，但这是最新的尝试。在 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;

当我打开反应开发工具并单击 withInputMask 组件时，这就是我所看到的。