Используйте ref для Material UI InputLabel - PullRequest
Новая
       9

Используйте ref для Material UI InputLabel

4 голосов
/ 18 января 2020

Как мне получить доступ к параметру ref InputLabel @material-ui/core в 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' относится к значению, но используется здесь как тип .ts (2749)

Используются версии Follwing:

  • "@ material-ui / core": "4.6.1",
  • "@ Типы / реагировать": "16.9.11",
  • "@ Типы / реагировать- dom ":" 16.9.4 ",
  • " реагировать ":" 16.11.0 ",
  • " реакция-дом ":" 16.11.0 ",
  • " машинопись ":" 3.7.4 ",

1 Ответ

0 голосов
/ 19 января 2020

Ссылка в InputLabel передается элементу root. Так что вам нужно будет набрать его с фактическим html интерфейсом элемента. Изменение его на следующее должно работать: 

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