Как использовать ссылки в React с Typescript

Question

Как использовать ссылки в React с Typescript

Я использую Typescript с React. У меня возникают проблемы с пониманием того, как использовать ссылки, чтобы получить статическую типизацию и intellisense относительно узлов реакции, на которые ссылаются ссылки. Мой код выглядит следующим образом.

import * as React from 'react';

interface AppState {
    count: number;
}

interface AppProps {
    steps: number;
}

interface AppRefs {
    stepInput: HTMLInputElement;
}

export default class TestApp extends React.Component<AppProps, AppState> {

constructor(props: AppProps) {
    super(props);
    this.state = {
        count: 0
    };
}

incrementCounter() {
    this.setState({count: this.state.count + 1});
}

render() {
    return (
        <div>
            <h1>Hello World</h1>
            <input type="text" ref="stepInput" />
            <button onClick={() => this.incrementCounter()}>Increment</button>
            Count : {this.state.count}
        </div>
    );
}}

295

reactjs typescript

Источник

user1716912 19 ноя '15 в 05:54

16 ответов

Решение

`React.createRef` (компоненты класса)

class ClassApp extends React.Component {
  inputRef = React.createRef<HTMLInputElement>();
  
  render() {
    return <input type="text" ref={this.inputRef} />
  }
}

Примечание. Пропуск старого API String Refs здесь...

`React.useRef` (Крючки / функциональные компоненты)

Ссылки только для чтения для узлов DOM:

const FunctionApp = () => {
  const inputRef = React.useRef<HTMLInputElement>(null) // note the passed in `null` arg
  return <input type="text" ref={inputRef} />
}

Изменяемые ссылки для произвольных сохраненных значений:

const FunctionApp = () => {
  const renderCountRef = useRef(0)
  useEffect(() => {
    renderCountRef.current += 1
  })
  // ... other render code
}

Примечание: не инициализироватьuseRef с null в этом случае. Это сделало быrenderCountRef тип readonly(см. пример). Если вам нужно предоставитьnull в качестве начального значения сделайте следующее:

const renderCountRef = useRef<number | null>(null)

Обратные вызовы (работают для обоих)

// Function component example 
const FunctionApp = () => {
  const handleDomNodeChange = (domNode: HTMLInputElement | null) => {
    // ... do something with changed dom node.
  }
  return <input type="text" ref={handleDomNodeChange} />
}

Образец детской площадки

127

Источник

user5669456 08 май '20 в 16:45

Если вы используете React.FC, добавить HTMLDivElement интерфейс:

const myRef = React.useRef<HTMLDivElement>(null);

И используйте его так:

return <div ref={myRef} />;

38

Источник

user6301762 30 мар '20 в 22:33

Начиная с React 16.3, способ добавления ссылок заключается в использовании React.createRef, как указал Джефф Боуэн в своем ответе. Однако вы можете воспользоваться Typescript, чтобы лучше набрать свой реф.

В вашем примере вы используете ссылку на элемент ввода. Таким образом, я бы так и сделал:

class SomeComponent extends React.Component<IProps, IState> {
    private inputRef: React.RefObject<HTMLInputElement>;
    constructor() {
        ...
        this.inputRef = React.createRef();
    }

    ...

    render() {
        <input type="text" ref={this.inputRef} />;
    }
}

Делая это, когда вы хотите использовать эту ссылку, вы получаете доступ ко всем методам ввода:

someMethod() {
    this.inputRef.current.focus(); // 'current' is input node, autocompletion, yay!
}

Вы также можете использовать его на пользовательских компонентах:

private componentRef: React.RefObject<React.Component<IProps>>;

и затем иметь, например, доступ к реквизиту:

this.componentRef.current.props; // 'props' satisfy IProps interface

35

Источник

user2874705 24 май '18 в 09:37

Одним из способов (который я делал) является настройка вручную:

refs: {
    [string: string]: any;
    stepInput:any;
}

тогда вы можете даже обернуть это в более хорошую функцию получения (например, здесь):

stepInput = (): HTMLInputElement => ReactDOM.findDOMNode(this.refs.stepInput);

33

Источник

user390330 19 ноя '15 в 06:00

РЕДАКТИРОВАТЬ: Это больше не правильный способ использовать ссылки с Typescript. Посмотрите на ответ Джеффа Боуэна и увеличьте его, чтобы улучшить видимость.

Нашел ответ на проблему. Используйте ссылки как ниже внутри класса.

refs: {
    [key: string]: (Element);
    stepInput: (HTMLInputElement);
}

Спасибо @basarat за указание в правильном направлении.

17

Источник

user1716912 20 ноя '15 в 12:09

FIRST ADD AN IMPORT

      import React, { useRef } from "react";

ТОГДА ЭТО

      const studentCapacityRef = useRef<HTMLInputElement>(null);

ИЛИ ЭТО

      const studentCapacityRef = useRef<HTMLAreaElement>(null);

ИЛИ ЭТО

      const studentCapacityRef = useRef<HTMLDivElement>(null);

и т. д...

6

Источник

user13358761 20 сен '22 в 11:27

Для тех, кто интересуется, как это сделать, когда у вас есть массив элементов:

const textInputRefs = useRef<(HTMLDivElement | null)[]>([])

...

const onClickFocus = (event: React.BaseSyntheticEvent, index: number) => {
    textInputRefs.current[index]?.focus()
};

...

{items.map((item, index) => (
    <textInput
        inputRef={(ref) => textInputs.current[index] = ref}
    />
    <Button
        onClick={event => onClickFocus(event, index)}
    />
}

4

Источник

user4934446 03 май '20 в 23:06

Чтобы использовать стиль обратного вызова ( https://facebook.github.io/react/docs/refs-and-the-dom.html) в соответствии с рекомендациями документации React, вы можете добавить определение свойства в классе:

export class Foo extends React.Component<{}, {}> {
// You don't need to use 'references' as the name
references: {
    // If you are using other components be more specific than HTMLInputElement
    myRef: HTMLInputElement;
} = {
    myRef: null
}
...
 myFunction() {
    // Use like this
    this.references.myRef.focus();
}
...
render() {
    return(<input ref={(i: any) => { this.references.myRef = i; }}/>)
}

2

Источник

user6580210 22 янв '17 в 03:26

Для пользователя машинописного текста конструктор не требуется.

...

private divRef: HTMLDivElement | null = null

getDivRef = (ref: HTMLDivElement | null): void => {
    this.divRef = ref
}

render() {
    return <div ref={this.getDivRef} />
}

...

2

Источник

user5297386 07 июн '19 в 08:26

Если вы не хотите, чтобы переслать refв интерфейсе Props нужно использовать RefObject<CmpType> введите от import React, { RefObject } from 'react';

2

Источник

user2657424 10 июл '19 в 18:06

Без полного примера, вот мой маленький тестовый скрипт для получения пользовательского ввода при работе с React и TypeScript. Основано частично на других комментариях и этой ссылке https://medium.com/@basarat/strongly-typed-refs-for-react-typescript-9a07419f807

/// <reference path="typings/react/react-global.d.ts" />

// Init our code using jquery on document ready
$(function () {
    ReactDOM.render(<ServerTime />, document.getElementById("reactTest"));
});

interface IServerTimeProps {
}

interface IServerTimeState {
    time: string;
}

interface IServerTimeInputs {
    userFormat?: HTMLInputElement;
}

class ServerTime extends React.Component<IServerTimeProps, IServerTimeState> {
    inputs: IServerTimeInputs = {};

    constructor() {
        super();
        this.state = { time: "unknown" }
    }

    render() {
        return (
            <div>
                <div>Server time: { this.state.time }</div>
                <input type="text" ref={ a => this.inputs.userFormat = a } defaultValue="s" ></input>
                <button onClick={ this._buttonClick.bind(this) }>GetTime</button>
            </div>
        );
    }

    // Update state with value from server
    _buttonClick(): void {
    alert(`Format:${this.inputs.userFormat.value}`);

        // This part requires a listening web server to work, but alert shows the user input
    jQuery.ajax({
        method: "POST",
        data: { format: this.inputs.userFormat.value },
        url: "/Home/ServerTime",
        success: (result) => {
            this.setState({ time : result });
        }
    });
}

}

1

Источник

user2470012 12 май '16 в 08:50

Из определения типа React

    type ReactInstance = Component<any, any> | Element;
....
    refs: {
            [key: string]: ReactInstance
    };

Таким образом, вы можете получить доступ к элементу refs следующим образом

stepInput = () => ReactDOM.findDOMNode(this.refs['stepInput']);

без переопределения индекса ссылок.

Как упомянул @manakor, вы можете получить ошибку как

Свойство 'stepInput' не существует для типа '{ [key: string]: Component | Элемент; }

если вы переопределите ссылки (зависит от IDE и используемой вами версии)

0

Источник

user4638709 26 дек '16 в 14:04

Просто чтобы добавить другой подход - вы можете просто привести свой реф, что-то вроде:

let myInputElement: Element = this.refs["myInput"] as Element

0

Источник

user940072 12 фев '17 в 14:29

Я всегда делаю это, в этом случае, чтобы получить ссылку

let input: HTMLInputElement = ReactDOM.findDOMNode<HTMLInputElement>(this.refs.input);

0

Источник

user2662112 04 апр '17 в 20:26

class SelfFocusingInput extends React.Component<{ value: string, onChange: (value: string) => any }, {}>{
    ctrls: {
        input?: HTMLInputElement;
    } = {};
    render() {
        return (
            <input
                ref={(input) => this.ctrls.input = input}
                value={this.props.value}
                onChange={(e) => { this.props.onChange(this.ctrls.input.value) } }
                />
        );
    }
    componentDidMount() {
        this.ctrls.input.focus();
    }
}

положить их в объект

-1

Источник

user4648522 01 авг '16 в 10:35

Другие вопросы по тегам reactjs typescript

user426839 01 май '17 в 21:20 2017-05-01 21:20 · Accepted Answer · 2017-05-01 21:20

Если вы используете React 16.3+, рекомендуемый способ создания ссылок - это использование React.createRef(),

class TestApp extends React.Component<AppProps, AppState> {
    private stepInput: React.RefObject<HTMLInputElement>;
    constructor(props) {
        super(props);
        this.stepInput = React.createRef();
    }
    render() {
        return <input type="text" ref={this.stepInput} />;
    }
}

Когда компонент монтируется, ref атрибута current свойство будет присвоено указанному элементу компонента /DOM и возвращено обратно null когда он размонтируется. Так, например, вы можете получить к нему доступ, используя this.stepInput.current,

Для больше на RefObject смотрите ответ @apieceofbart или пиар createRef() был добавлен в.

Если вы используете более раннюю версию React (<16.3) или вам нужно более детальное управление, когда ссылки установлены и не установлены, вы можете использовать "обратные ссылки".

class TestApp extends React.Component<AppProps, AppState> {
    private stepInput: HTMLInputElement;
    constructor(props) {
        super(props);
        this.stepInput = null;
        this.setStepInputRef = element => {
            this.stepInput = element;
        };
    }
    render() {
        return <input type="text" ref={this.setStepInputRef} />
    }
}

Когда компонент монтируется, React вызывает ref обратный вызов с элементом DOM, и будет вызывать его с null когда он размонтируется. Так, например, вы можете получить к нему доступ, просто используя this.stepInput,

Определяя ref Обратный вызов как связанный метод класса, а не встроенная функция (как в предыдущей версии этого ответа), позволяет избежать повторного вызова обратного вызова во время обновлений.

Раньше был API, где ref Атрибут был строкой (см . ответ Акшара Пателя), но из-за некоторых проблем строковые ссылки настоятельно не рекомендуется и в конечном итоге будут удалены.

Отредактировано 22 мая 2018 года, чтобы добавить новый способ делать ссылки в Реакте 16.3. Спасибо @apieceofbart за указание на то, что появился новый способ.

Как использовать ссылки в React с Typescript

16 ответов

React.createRef (компоненты класса)

React.useRef (Крючки / функциональные компоненты)

Обратные вызовы (работают для обоих)

`React.createRef` (компоненты класса)

`React.useRef` (Крючки / функциональные компоненты)