如何使用refs在React与Typescript

我使用Typescript与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开始，添加refs的方法就是使用React。正如Jeff Bowen在回答中指出的那样，createRef。然而，你可以利用Typescript来更好地输入你的引用。

在你的例子中，你在input元素上使用了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} />;
    }
}

通过这样做，当你想使用那个ref时，你可以访问所有的输入法:

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

2018-05-24 09:37:28

其他回答

首先添加一个导入

import React, { useRef } from "react";

那么这个

const studentCapacityRef = useRef<HTMLInputElement>(null);

或者这个

const studentCapacityRef = useRef<HTMLAreaElement>(null);

或者这个

const studentCapacityRef = useRef<HTMLDivElement>(null);

等等……

2022-09-20 11:27:10

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

2017-01-22 03:26:42

一种方法(我一直在做的)是手动设置:

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

然后你甚至可以用一个更好的getter函数来包装它(例如这里):

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

2015-11-19 06:00:28

在这种情况下，我总是这样做抓住裁判

输入:htmlinterment =反应。

2017-04-04 20:26:16

反应。createRef(类比较)

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

反应。useRef(钩子/函数比较)

a) Use readonly refs for React-managed DOM nodes:

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

inputRef。通过将Current属性的值初始化为null, Current属性变为只读属性。

b) Use

可变参

for arbitrary stored values akin to instance variables:

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

注意:在这种情况下不要初始化useRef为null——它会使renderCountRef类型为只读(参见示例)。如果你需要提供null作为初始值，这样做:

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

回调引用(两个)

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

注意:字符串引用被认为是遗留的，在此回答的范围内被省略。

操场上的样品

2020-05-08 13:45:43

如何使用refs在React与Typescript

推荐文章

最新文章

标签