Использование React.findDOMNode в TypeScript

Я следую 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) }>
 
 
 
 </form>;
 }
}

Вызов console.log(React.findDOMNode(this.refs['author'])); возвращает мне в консоли. Однако я не могу понять, как получить значение входного элемента (что я ввел в поле ввода).

До сих пор я пробовал следующее вместе с несколькими другими:

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. Кроме того, я новичок в разработке интерфейса, поэтому, возможно, мой подход неверен.

4 ответа

Обратите внимание, что учебник написан на JavaScript, а не TypeScript.

Однако я нашел решение для этого правильно (ответ OP очень громоздкий). В принципе, вы должны сделать два изменения из кода учебника. Для справки, вот код из учебника, поскольку я пишу это:

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

Первое изменение:

this.refs.author

становится

this.refs["author"]

Я новичок в TypeScript, но я предполагаю, что он предпочитает использовать синтаксис индексатора над синтаксисом свойств для объектов, которые предназначены для того, чтобы их истинные свойства не были объявлены вперед.

Во-вторых, и самое главное,

React.findDOMNode

становится

React.findDOMNode

В основном здесь мы должны конкретно сказать TypeScript, какой элемент мы запрашиваем. Используйте полный код для поиска полного списка доступных элементов. Я предполагаю, что он охватывает все внутренние компоненты.

Вот заключительная, работающая строка кода:

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

Для удобства здесь приведенный метод до того момента, когда этот метод впервые появляется в учебнике (слегка реорганизованный, чтобы избежать вызова 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 = "";
}
</htmlinputelement></htmlinputelement>


EDIT: nlaq предоставил ответ на мой вопрос, однако я думаю, что следующее может быть полезно для читателей, поэтому я оставлю это ответьте.

После чтения Формы | 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) }>
  this.handleChange(e) } placeholder="Your name" />
 
 
 </form>;
}

Я все еще озадачен тем, почему в учебнике показано использование findDOMNode. Возможно, учебник показывает старый способ? Я все еще новичок в React, поэтому, если есть более интуитивно понятный способ, дайте мне знать.

Для полного примера этот SO ответ помог мне.


Я нашел этот способ решить эту проблему.

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


Ссылки в React не работают так. Чтобы получить элемент ссылки DOM, вам необходимо задать его так:

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

licensed under cc by-sa 3.0 with attribution.