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

Я после Реагировать Уроке и застрял на том, как использовать 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 я вижу следующее, Но я все еще не могу понять что тут называть. enter image description here

я использую определения типов из DefinitedlyTyped. Кроме того, я новичок в разработке front-end, поэтому, возможно, мой подход ошибочен.

7
javascript react-jsx reactjs typescript

5 ответов

обратите внимание, что учебник написан на 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 = "";
}
11

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

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

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

после прочтения Формы | Реагировать статья, я смог получить значение, обработав 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. Возможно, учебник показывает старый способ? Я все еще новичок, чтобы реагировать, так что если есть больше интуитивно понятный способ, пожалуйста, дайте мне знать.

для полного примера,это так ответ помог мне.

0

ни одно из вышеперечисленных решений не сработало для меня (и я думаю, что это может быть более простое решение). Вот как мне удалось заставить его работать в typescript (пример использования 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>
    );
}
0

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

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