在 TypeScript 中使用 React.findDOMNode

Question

我正在关注 React Tutorial，但在如何使用 React.findDOMNode 上卡住了。

这是我的代码：

export class CommentForm extends React.Component<{}, {}> {
    handleSubmit(e: React.FormEvent) {
        e.preventDefault();
        console.log(React.findDOMNode(this.refs['author']));
    }

    render() {
        return <form className="commentForm" onSubmit={ e => this.handleSubmit(e) }>
                 <input type="text" placeholder="Your name" ref="author" />
                 <input type="text" placeholder="Say something..." ref="text" />
                 <input type="submit" value="Post" />
               </form>;
    }
}

调用 console.log(React.findDOMNode(this.refs['author'])); 返回 <input type="text" data-reactid=".0.2.0" placeholder="Your name"> 在控制台中。但是，我不知道如何检索输入元素的值（我在输入框中键入的内容）。

到目前为止，我已经尝试了以下方法以及其他一些方法：

React.findDOMNode(this.refs['author']).value; // "value" does not exist on type "Element"
React.findDOMNode(this.refs['author']).getAttribute('value'); // null
React.findDOMNode(this.refs['author']).textContent; // null

在智能感知中我可以看到以下内容，但我仍然不知道在这里调用什么。

我正在使用 DefinitedlyTyped 中的类型定义。另外，我是 front-end 开发的新手，所以我的方法可能是错误的。

Answer 1

React 中的引用不是这样工作的。要获得参考的 DOM 元素，您需要以这种方式询问它：

let authorElement = this.refs.author.getDOMNode();

Answer 2

EDIT: 提供了我的问题的答案，但是我认为以下内容对读者有用，所以我会留下这个答案。

阅读 Forms | React 文章后，我能够通过处理 onChange 事件来获取值：

handleChange(e) {
    e.preventDefault();
    console.log(e.target.value); // e.target.value gives the value in the input box
}

render() {
    return <form className="commentForm" onSubmit={ e => this.handleSubmit(e) }>
             <input type="text" onChange={ e => this.handleChange(e) } placeholder="Your name" />
             <input type="text" placeholder="Say something..." ref="text" />
             <input type="submit" value="Post" />
           </form>;
}

我仍然不明白为什么教程显示 findDOMNode 的用法。也许教程显示的是旧方法？我还是 React 的新手，所以如果有更直观的方法请告诉我。

有关完整示例，this SO answer 帮助了我。

Answer 3

请注意，教程是用 JavaScript 编写的，而不是 TypeScript。

但是，我找到了正确执行此操作的解决方案（OP 的回答非常麻烦）。基本上，您必须对教程代码进行两处更改。作为参考，这是我编写本文时教程中的代码：

var author = React.findDOMNode(this.refs.author).value.trim();

第一个变化是：

this.refs.author

变成

this.refs["author"]

我是 TypeScript 的新手，但我认为它更喜欢您使用索引器语法而不是属性语法来表示不具有前向声明的真实属性的对象。

其次，也是最重要的，

React.findDOMNode

变成

React.findDOMNode<HTMLInputElement>

基本上，在这里我们必须明确告诉 TypeScript 我们请求的是哪种 元素。使用您的代码完成查找可用元素的完整列表。我假设它涵盖了所有内部组件。

这是最后的工作代码行：

var author = React.findDOMNode<HTMLInputElement>(this.refs["author"]).value.trim();

为方便起见，这里是该方法在本教程中首次出现之前的完整方法（略微重构以避免调用 findDOMNode 两次）：

handleSubmit(e: React.FormEvent) {
    e.preventDefault();

    var authorInput = React.findDOMNode<HTMLInputElement>(this.refs["author"]);
    var textInput = React.findDOMNode<HTMLInputElement>(this.refs["text"]);

    var author = authorInput.value.trim();
    var text = textInput.value.trim();

    if (!text || !author)
        return;

    authorInput.value = textInput.value = "";
}

Answer 4

我找到了解决这个问题的方法。

const author = (ReactDOM.findDOMNode(this.refs.author) as HTMLInputElement).value;

Answer 5

None 上述解决方案对我来说非常有效（我认为这可能是一个更简单的解决方案）。这就是我设法让它在打字稿中工作的方式（例如使用 refs 来聚焦 FormControl）：

确保您已导入 ReactDom：

import * as ReactDOM from 'react-dom';

在你的组件中：

public focus():void {
    let input = ReactDOM.findDOMNode(this.refs["titleInput"]) as HTMLInputElement;
    input.focus();
}

render() {
    return (
        <FormGroup controlId="formBasicText">
            <FormControl ref={"titleInput"} type="text"/>
        </FormGroup>
    );
}

在 TypeScript 中使用 React.findDOMNode

Using React.findDOMNode in TypeScript

javascript

typescript

reactjs

react-jsx