reactjs - 使用 ref 作为 Material UI InputLabel

Question

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

以下代码会导致错误，ref 表示:

TS2769: No overload matches this call.

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' refers to a value, but is being used as a type here.ts(2749)

正在使用以下版本:

• “@material-ui/core”:“4.6.1”，
• “@types/react”:“11年9月16日”，
• “@types/react-dom”:“16.9.4”，
• “ react ”:“16.11.0”，
• "react-dom": "16.11.0",
• “ typescript ”:“3.7.4”，

Answer 1

InputLabel 中的 ref 被转发到根元素。因此，您需要使用实际的 html 元素界面来输入它。将其更改为以下内容应该可以工作:

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