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

在intellisense中，我可以看到以下内容，但我仍然无法弄清楚这里要调用什么。

我使用DefinitedlyTyped中的类型定义。另外，我是前端开发的新手，所以也许我的方法是错误的。

Answer 1

请注意，本教程是用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 2

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

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

Answer 3

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

Answer 4

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

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

在TypeScript中使用React.findDOMNode

4 个答案: