Подтвердить что ты не робот

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

Я использую Typescript с React. У меня возникли проблемы с пониманием того, как использовать refs, чтобы получить статическую типизацию и 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>
    );
}}
4b9b3361

ОТВЕТЫ

Ответ 1

Если вы используете React 16. 3+, предлагаемый способ создания React.createRef() - это использование 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} />;
    }
}

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

Для получения дополнительной информации о RefObject см. Ответ @apieceofbart или PR, созданный 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 года, чтобы добавить новый способ выполнения ссылок в React 16.3. Спасибо @apieceofbart за указание, что появился новый способ.

Ответ 2

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

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

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

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

Ответ 3

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

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

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

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

Ответ 4

Начиная с 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

Ответ 5

Чтобы использовать стиль обратного вызова (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; }}/>)
}

Ответ 6

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

/// <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 });
        }
    });
}

}

Ответ 7

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

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

Итак, вы можете получить доступ к элементу refs, следуя

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

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

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

Свойство 'stepInput' не существует в типе '{[ключ: строка]: Компонент | Элемент; }

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

Ответ 8

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

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

Ответ 9

Я всегда делаю это, в этом случае для захвата ссылки

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

Ответ 10

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

...

private divRef: HTMLDivElement | null = null

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

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

...

Ответ 11

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

Ответ 12

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();
    }
}

поместите их в объект