findDOMNode（）とgetDOMNode（）は関数ではありません

Question

私は同じエラーが議論されたsimillar topicを読みましたが、私の問題は解決しませんでした。

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 

class SearchBox extends Component { 

    render() { 
     return (
      <form onSubmit = {this.handleClick.bind(this)}> 
       <input 
        ref="search" 
        type="text" 
        placeholder="username..."/> 

       <input 
        type="submit" 
        value="Search" /> 
      </form> 
     ); 
    } 

    handleClick(e) { 
     e.preventDefault(); 
     let username = this.refs.search.findDOMNode().value; 
     this.props.fetchUser(username); 
     this.refs.search.findDOMNode().value = ''; 
    } 

    fetchUser(username) { 
     let url = `https://api.github.com/users/${username}`; 

     this.fetchApi(url); 
     } 

    fetchApi(url) { 
     fetch(url) 
     .then((res) => res.json()) 
     .then((data) => { 

      this.setState({ 
      username: data.login, 
      image: data.avatar_url, 
      name: data.name, 
      location: data.location, 
      followers: data.followers, 
      following: data.following 
      }) 
     }) 
    } 
} 

export default SearchBox; 

コンポーネントをレンダリングした後、私は次のエラーを取得：

TypeError: this.refs.search.findDOMNode is not a function 
    20 | 
    21 | handleClick(e) { 
    22 | e.preventDefault(); 
> 23 |  let username = this.refs.search.findDOMNode().value; 
    24 |  
    25 |  this.props.fetchUser(username); 
    26 |  this.refs.search.findDOMNode().value = ''; 

私もfindDOMNode（）とgetDOMNodeを（）メソッド使用してみましたが、しかし、運なしで、私はシンプルなアプリのコンポーネントを持っています。どちらも同じエラーを引き起こします。何か案は？

Answer 1

.getDOMNodeが反応バージョン0.13で廃止されていないとfindDOMNodeはダン・アブラモフ監督、Github issueこのあたりとして

必要はもはやあり、ともref callbacks

の使用で可能な除去またはfindDOMNodeについて会談最新版では、次のものを使用することができます。

class SearchBox extends Component { 

    render() { 
     return (
      <form onSubmit = {this.handleClick.bind(this)}> 
       <input 
        ref={(ref) => this.search = ref} 
        type="text" 
        placeholder="username..."/> 

       <input 
        type="submit" 
        value="Search" /> 
      </form> 
     ); 
    } 

    handleClick(e) { 
     e.preventDefault(); 
     let username = this.search.value; 
     this.props.fetchUser(username); 
     this.refs.search.findDOMNode().value = ''; 
    } 

こちらもお読みくださいanswer on StackOverflow文字列リファレンスの代わりにrefコールバックを使用する方法の詳細は

Answer 2

あなたのコードから理解できることは、フェッチ要求で値を送信して空の文字列を設定することだけです。しかし、あなたがやっているやり方は反応の方法ではないので、状態を使って更新された値を保持することによって、制御されたコンポーネントを使うべきです。

class SearchBox extends Component { 
    state = { 
    username: '', 
    }; 

    render() { 
    const { username } = this.state; 
    return (
     <form onSubmit = {this.handleClick.bind(this)}> 
      <input 
       value={username} 
       type="text" 
       onChange={this.setUsername} 
       placeholder="username..."/> 

      <input 
       type="submit" 
       value="Search" /> 
     </form> 
    ); 
    } 

    setUsername = (event) => this.setState({ username: event.target.value }); 

    handleClick(e) { 
    e.preventDefault(); 
    this.props.fetchUser(this.state.username); 
    this.setState({ username: '' }); 
    } 
} 

入力すると状態が更新され、ボタンをクリックすると状態からユーザー名を取得できます。状態をリセットすると、自動的に入力の値が空の文字列として設定されます。