Sử dụng React.findDOMNode trong TypeScript

Question

Tôi đang theo dõi React Tutorial và bị kẹt về cách sử dụng React.findDOMNode.

Đây là mã của tôi:

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'])); mang lại cho tôi trở lại <input type="text" data-reactid=".0.2.0" placeholder="Your name"> trong giao diện điều khiển. Tuy nhiên, tôi không thể tìm ra cách lấy giá trị của phần tử đầu vào (những gì tôi đã nhập trong hộp nhập liệu).

Cho đến nay tôi đã thử những điều sau đây cùng với một vài người khác:

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 

Trong IntelliSense tôi có thể thấy những điều sau đây, nhưng tôi vẫn không thể tìm ra những gì để gọi đây.

Tôi đang sử dụng định nghĩa loại từ DefinitedlyTyped. Ngoài ra, tôi mới phát triển front-end, vì vậy có lẽ cách tiếp cận của tôi là sai.

Answer 1

Lưu ý rằng hướng dẫn được viết bằng JavaScript, không phải là TypeScript.

Tuy nhiên, tôi đã tìm thấy giải pháp để thực hiện việc này đúng cách (câu trả lời của OP rất cồng kềnh). Về cơ bản, bạn phải thực hiện hai thay đổi từ mã hướng dẫn. Để tham khảo, đây là mã từ hướng dẫn như của tôi viết những dòng này:

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

Sự thay đổi đầu tiên là:

this.refs.author 

trở thành

this.refs["author"] 

Tôi mới đến nguyên cảo, nhưng tôi cho rằng nó thích bạn sử dụng cú pháp lập chỉ mục hơn cú pháp thuộc tính cho các đối tượng có nghĩa là không có thuộc tính đúng của chúng được chuyển tiếp khai báo.

Thứ hai, và quan trọng nhất,

React.findDOMNode 

trở thành

React.findDOMNode<HTMLInputElement> 

Về cơ bản đây chúng ta phải đặc biệt kể nguyên cảo loại của nguyên tố chúng tôi đang yêu cầu. Sử dụng mã của bạn hoàn thành để tìm danh sách đầy đủ các yếu tố có sẵn. Tôi giả sử nó bao gồm tất cả các thành phần nội tại.

Đây là trận chung kết, làm việc, dòng mã:

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

Để thuận tiện, đây là phương pháp hoàn thành lên đến điểm mà phương pháp này đầu tiên xuất hiện trong hướng dẫn (hơi refactored để tránh gọi findDOMNode hai lần):

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

Tài liệu tham khảo trong React không hoạt động như thế này. Để có được các yếu tố DOM của tài liệu tham khảo, bạn cần phải hỏi nó theo cách đó:

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

Answer 3

EDIT: nlaq cung cấp câu trả lời cho câu hỏi của tôi, tuy nhiên tôi nghĩ rằng sau đây có thể hữu ích cho độc giả, vì vậy tôi sẽ để lại câu trả lời này.

Sau khi đọc Forms | React bài viết, tôi đã có thể để có được giá trị bằng cách xử lý sự kiện 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>; 
} 

Tôi vẫn đang bối rối vì sao hướng dẫn cho thấy việc sử dụng các findDOMNode. Có lẽ hướng dẫn đang hiển thị một cách cũ? Tôi vẫn còn mới với React, vì vậy nếu có một cách trực quan hơn xin vui lòng cho tôi biết.

Ví dụ đầy đủ, this SO answer đã giúp tôi.

Answer 4

Tôi tìm thấy cách này để giải quyết vấn đề này.

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