如何在带有Typescript的React中使用refs

我在React中使用Typescript。我在理解如何使用refs方面遇到麻烦，以便相对于refs引用的react节点获得静态类型和智能感知。我的代码如下。

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

如果您使用的是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的答案或添加了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在卸载时使用DOM元素调用回调。因此，例如，您可以使用轻松访问它this.stepInput。

通过将ref回调定义为类的绑定方法，而不是内联函数（如先前版本）如此答案），可以避免在更新过程中两次调用该回调。

有曾经是一个API，其中ref属性是一个字符串（见AKSHAR特尔的答案），但由于一些 问题，串裁判的强烈反对，并最终将被删除。

编辑于2018年5月22日，以在React 16.3中添加执行引用的新方法。感谢@apieceofbart指出有一种新方法。

一种方法（我一直在做）是手动设置：

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

那么您甚至可以将其包装在一个更好的getter函数中（例如here）：

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

从React 16.3开始，添加引用的方法是使用Jeff Bowen在回答中指出的React.createRef。但是，您可以利用Typescript更好地键入您的引用。

在您的示例中，您在输入元素上使用了ref。因此，他们这样做的方式是：

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

编辑：这已不再是使用Typescript引用的正确方法。查看Jeff Bowen的答案，并对其进行投票以提高其可见度。

找到了问题的答案。在类中使用下面的引用。

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

感谢@basarat指出正确的方向。

React.createRef （类组件）

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

注意：此处省略旧的String Refs旧版API。

React.useRef （挂钩/功能组件）

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

游乐场样本

如果您使用React.FC，请添加HTMLDivElement接口：

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

并按如下所示使用它：

return <div ref={myRef} />;

要按照React文档的建议使用回调样式（https://facebook.github.io/react/docs/refs-and-the-dom.html），您可以在类的属性上添加一个定义：

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

缺少完整的示例，这是我的小测试脚本，用于在使用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 });
        }
    });
}

}

对于打字稿用户，不需要构造函数。

...

private divRef: HTMLDivElement | null = null

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

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

...

从React类型定义

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

因此，您可以按以下方式访问refs元素

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

没有重新定义refs索引。

正如@manakor提到的那样，您会得到类似的错误

类型'{[键：字符串]：属性| 元件; }

如果您重新定义引用（取决于您使用的IDE和ts版本）

只是添加了一种不同的方法-您可以简单地投射引用，例如：

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

我总是这样做，在这种情况下要获取参考

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

如果你不会转发您的ref界面，你需要使用，道具RefObject<CmpType>从类型import React, { RefObject } from 'react';

对于那些希望在拥有一系列元素的情况下如何做的人：

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

把它们放在一个物体上