在 TypeScript 中使用 React.findDOMNode

Posted 2023-02-22

【中文标题】在 TypeScript 中使用 React.findDOMNode

【英文标题】：Using React.findDOMNode in TypeScript

【发布时间】：2015-12-05 11:14:05

【问题描述】：

我正在关注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 的类型定义。 另外，我是前端开发的新手，所以可能我的方法是错误的。

【参考方案1】：

以上解决方案都不适合我（我认为这可能是一个更简单的解决方案）。这就是我设法让它在打字稿中工作的方式（例如使用 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>
    );

【参考方案2】：

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

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

【讨论】：

欢迎来到 ***。仅包含代码的答案往往会被标记为删除，因为它们是“低质量”的。请阅读有关回答问题的帮助部分，然后考虑在您的回答中添加一些评论。

【参考方案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 = "";

【讨论】：

谢谢！我实际上尝试了HTMLElement 和其他一些类型，但它们没有用。我现在看到要获得value，您必须使用HTMLInputElement 接口。知道哪种类型有点棘手。

我正在使用React.findDOMNode<HTMLInputElement>，但在'typeof _React' 上不存在findDOMNode。有什么想法吗？

回答自己...使用import * as ReactDOM from 'react-dom'; 然后ReactDOM.findDOMNode<HTMLInputElement> 解决了我的问题

【参考方案4】：

编辑：nlaq 提供了我的问题的答案，但我认为以下内容可能对读者有用，因此我将保留此答案。

看完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 帮助了我。

【讨论】：

查看我的答案，这可能是处理此问题的正确方法。您遇到的问题不是因为它是一种旧的做事方式，而是因为 TypeScript 要求我们正确指定类型信息。

【参考方案5】：

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

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

【讨论】：

您好，我尝试了您的示例，但 Component 上不存在 getDOMNode。这是declaration。它确实存在于我没有使用的ClassicComponent。

这个问题被标记为 TypeScript，而不是 JavaScript。通过 tsd 包含的 .d.ts 文件不包含 getDOMNode 方法。