资料UI InputLabel使用参考资料

Question

如何访问ref param of InputLabel of @material-ui/core in TypeScript？

下面的代码会导致错误，ref说：

TS2769:没有重载匹配此调用。

export class ComboBox extends React.Component<ComboBoxProps, ComboBoxState> {
    private inputLabelRef = React.createRef();

    public render() {
        return <FormControl fullWidth={this.props.fullWidth} variant='outlined'>
            <InputLabel required={this.props.required}
                        id={this.props.id + '-label'}
                        ref={this.inputLabelRef}>
                {this.props.caption}
            </InputLabel>
            <Select labelId={this.props.id + '-label'}
                    id={this.props.id}
                    value={this.props.value}
                    onChange={(e: any) => this.onChangeSelection(e.target.value)}
                    labelWidth={200}>
                {this.renderItems()}
            </Select>
        </FormControl>;
    }

    ...
}

我已经试过使用泛型，尝试：

private inputLabelRef = React.createRef<InputLabel>();

但是这导致了InputLabel所说的错误：

'InputLabel‘指的是一个值，但被用作here.ts类型(2749)

正在使用折叠式版本：

• "@material-ui/core"："4.6.1“、
• "@types/react"："16.9.11”、
• "@types/react-dom"："16.9.4“、
• "react"："16.11.0”、
• "react-dom"："16.11.0“、
• "typescript"："3.7.4”、

Answer 1

InputLabel中的引用被转发到根元素。因此，您需要使用实际的html元素接口键入它。将其改为以下内容应该有效：

private inputLabelRef = React.createRef<HTMLLabelElement>();