在TypeScript中使用React.findDOMNode [英] Using React.findDOMNode in TypeScript

问题描述

我正在关注

我正在使用 DefinitedlyTyped 。
另外，我是前端开发的新手，所以也许我的方法是错误的。

解决方案

请注意本教程是用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 =; 
} 
  

I'm following the React Tutorial and got stuck on how to use React.findDOMNode.

Here is my code:

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

Calling console.log(React.findDOMNode(this.refs['author'])); gives me back <input type="text" data-reactid=".0.2.0" placeholder="Your name"> in the console. However, I cannot figure out how to retrieve the value of the input element (what I typed in the input box).

So far I've tried the following along with a few others:

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

In intellisense I can see the following, but I still cannot figure out what to call here.

I'm using the type definitions from DefinitedlyTyped. Also, I'm new to front-end development, so maybe my approach is wrong.

解决方案

Note that the tutorial is written in JavaScript, not TypeScript.

However, I have found the solution to doing this properly (OP's answer is very cumbersome). Basically, you have to make two changes from the tutorial code. For reference, here is the code from the tutorial as of me writing this:

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

The first change is:

this.refs.author

Becomes

this.refs["author"]

I'm new to TypeScript, but I assume that it prefers you use indexer syntax over property syntax for objects that are meant to not have their true properties forward-declared.

Second, and most importantly,

React.findDOMNode

Becomes

React.findDOMNode<HTMLInputElement>

Basically here we have to specifically tell TypeScript what kind of element we are requesting. Use your code-complete to find a complete list of elements available. I assume it covers all intrinsic components.

Here is the final, working, line of code:

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

For convenience, here is the completed method up to the point where this method first appears in the tutorial (slightly refactored to avoid invoking findDOMNode twice):

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 = "";
}

这篇关于在TypeScript中使用React.findDOMNode的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！