将 ref 用于材料 UI 输入标签

Question

如何在 TypeScript 中访问 InputLabel 的@material-ui/coreref参数？

以下代码导致错误，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"指的是一个值，但在这里用作类型.ts(2749(

使用中的福尔翼版本：

• "@material-ui/核心"： "4.6.1"，
• "@types/反应"： "16.9.11"，
• "@types/反应-dom"： "16.9.4"，
• "反应"： "16.11.0"，
• "react-dom"： "16.11.0"，
• "打字稿"： "3.7.4"，

Answer 1

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

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