Verwendung von Refs in Reagieren mit Typoskript

Ich verwende Typescript mit React. Ich habe Probleme zu verstehen, wie Refs verwendet werden, um statische Typisierung und Intellisense in Bezug auf die von den Refs referenzierten Reaktionsknoten zu erhalten. Mein Code lautet wie folgt.

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

Wenn Sie React 16.3+ verwenden, wird die vorgeschlagene Methode zum Erstellen von Refs verwendet 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} />;
    }
}

Wenn die Komponente bereitgestellt wird, refwird die currentEigenschaft des Attributs dem referenzierten Komponenten- / DOM-Element zugewiesen und nullbeim Aufheben der Bereitstellung zurück zugewiesen. So können Sie beispielsweise mit darauf zugreifen this.stepInput.current.

Weitere Informationen findenRefObject Sie unter @ apieceofbarts Antwort oder die PR createRef() wurde hinzugefügt.

Wenn Sie eine frühere Version von React (<16.3) verwenden oder eine genauere Kontrolle darüber benötigen, wann Refs gesetzt und deaktiviert werden, können Sie "Callback Refs" verwenden .

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

Wenn die Komponente bereitgestellt wird, ruft React den refRückruf mit dem DOM-Element auf und ruft ihn auf, nullwenn die Bereitstellung aufgehoben wird. So können Sie beispielsweise einfach mit darauf zugreifen this.stepInput.

Indem Sie den refRückruf als gebundene Methode für die Klasse im Gegensatz zu einer Inline-Funktion definieren (wie in einer früheren Version dieser Antwort), können Sie verhindern, dass der Rückruf bei Aktualisierungen zweimal aufgerufen wird .

Es verwendet zu sein , eine API , wo das refAttribut war ein String (siehe Akshar Patel Antwort ), aber aufgrund einiger Probleme , string Refs dringend abgeraten werden und wird schließlich entfernt werden.

Bearbeitet am 22. Mai 2018, um die neue Methode zum Ausführen von Refs in React 16.3 hinzuzufügen. Vielen Dank an @apieceofbart für den Hinweis, dass es einen neuen Weg gibt.

Eine Möglichkeit (die ich gemacht habe ) ist die manuelle Einrichtung:

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

dann können Sie dies sogar in eine schönere Getter-Funktion einwickeln (zB hier ):

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

Seit React 16.3 können Sie Refs hinzufügen, indem Sie React.createRef verwenden, wie Jeff Bowen in seiner Antwort gezeigt hat. Sie können jedoch Typescript nutzen, um Ihre Referenz besser einzugeben.

In Ihrem Beispiel verwenden Sie ref on input element. So würde ich es machen:

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

    ...

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

Auf diese Weise haben Sie Zugriff auf alle Eingabemethoden, wenn Sie diese Referenz verwenden möchten:

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

Sie können es auch für benutzerdefinierte Komponenten verwenden:

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

und dann zum Beispiel Zugriff auf Requisiten haben:

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

BEARBEITEN: Dies ist nicht mehr der richtige Weg, um Refs mit Typescript zu verwenden. Schauen Sie sich Jeff Bowens Antwort an und stimmen Sie sie ab, um ihre Sichtbarkeit zu erhöhen.

Ich habe die Antwort auf das Problem gefunden. Verwenden Sie die folgenden Referenzen in der Klasse.

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

Vielen Dank an @basarat für den Hinweis in die richtige Richtung.

React.createRef (Klassenkomponenten)

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

Hinweis: Hier wird die alte String Refs- Legacy-API weggelassen ...

React.useRef (Haken / Funktionskomponenten)

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
}

Hinweis: In diesem Fall nicht initialisieren useRefmit null. Es würde den renderCountRefTyp machen readonly(siehe Beispiel ). Wenn Sie benötigen bieten nullals Anfangswert, dies zu tun:

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

Rückrufreferenzen (funktionieren für beide)

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

Spielplatz Probe

Wenn Sie verwenden React.FC, fügen Sie die HTMLDivElementSchnittstelle hinzu:

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

Und verwenden Sie es wie folgt:

return <div ref={myRef} />;

Um den in der React-Dokumentation empfohlenen Rückrufstil ( https://facebook.github.io/react/docs/refs-and-the-dom.html ) zu verwenden, können Sie eine Definition für eine Eigenschaft in der Klasse hinzufügen:

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

Da mir kein vollständiges Beispiel fehlt, ist hier mein kleines Testskript zum Abrufen von Benutzereingaben bei der Arbeit mit React und TypeScript. Teilweise basierend auf den anderen Kommentaren und diesem Link 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 });
        }
    });
}

}}

Für Typoskriptbenutzer ist kein Konstruktor erforderlich.

...

private divRef: HTMLDivElement | null = null

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

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

...

Aus der Definition des Reaktionstyps

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

So können Sie wie folgt auf Ihr refs-Element zugreifen

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

ohne Neudefinition des Referenzindex.

Wie @manakor erwähnt, können Sie Fehler wie bekommen

Die Eigenschaft 'stepInput' ist für den Typ '{[key: string]: Component | nicht vorhanden Element; }}

Wenn Sie Refs neu definieren (abhängig von der verwendeten IDE- und TS-Version)

Nur um einen anderen Ansatz hinzuzufügen - Sie können einfach Ihren Schiedsrichter besetzen, so etwas wie:

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

Ich mache das immer, in diesem Fall, um mir einen Schiedsrichter zu schnappen

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

Wenn Sie Ihre nicht weiterleiten möchten, müssen Sie refin der Props-Oberfläche den RefObject<CmpType>Typ from verwendenimport React, { RefObject } from 'react';

Für diejenigen, die sich ansehen, wie es geht, wenn Sie eine Reihe von Elementen haben:

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

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

lege sie in ein Objekt