リアクションでYouTubeを検索する

Question

YouTubeを検索する簡単なアプリがあります。私はそれを実行するとエラーは発生しませんが、検索ボタンをクリックすると実際に何も起こりません！

以下は、関連するコードです：

class App extends React.Component{ 
    constructor() { 
     super(); 
     this.state = { 
      searchResults: [] 
     } 
     this.search = this.search.bind(this); 
     this.showResults = this.showResults.bind(this); 
    } 

    showResults(response) { 
     this.setState({ 
      searchResults: response.results 
     }) 
     console.log(response) 
    } 

    search(searchTerm) { 
     fetch("www.googleapis.com/youtube/v3/search", { 
      type: "GET", 
      part: 'snippet', 
      url: "www.googleapis.com/youtube/v3/search", 
      key: "AIzaSyCBPX-gonEMREh2OyT3S9Q7oaxBFaxkBZs", 
      q: searchTerm, 
      success: function(response) { 
       this.showResults(response); 
      }.bind(this) 
     }); 
    } 

    render() { 
     return (
      <div> 
       <Searchbox search={this.search}/> 
       <Mapresults searchResults={this.state.searchResults} /> 
      </div> 
     ) 
    } 
} 

class Searchbox extends React.Component{ 
    createAjax(){ 
     var url = 'https://www.googleapis.com/youtube/v3/search'; 
     var key = 'AIzaSyCBPX-gonEMREh2OyT3S9Q7oaxBFaxkBZs'; 
     var searchresult = ReactDOM.findDOMNode(this.refs.query).value; 
     var fullUrl = url + key + searchresult; 
     this.props.search(fullUrl); 
    } 
    render(){ 
     return(
      <div> 
       <form id="search-term"> 
        <input ref="query" type="text"/><button id="search-term" onChange= 
         {() => this.createAjax.bind(this)}/> 
       </form> 
       <h2 id= "root">test</h2> 
       <h2 id="demo"></h2> 
      </div> 
     ) 
    } 
} 

私はそれをそれを修正しようとした開発ツールを反応させる追加しましたが、単にレンダリングしていないようです。

Answer 1

ReactDOM.findDOMNode(this.refs.query).valueを使用して検索ボックスの値を取得するのではなく、controlled componentパターンを試してみてください。これにより、コンポーネントの状態がプレゼンテーションを駆動できるようになります。

ここ制御コンポーネントパターン実装して、あなたの検索ボックスコンポーネントの抜粋です：私は'Access-Control-Allow-Origin'エラーを受け取りましたが、この変更は、私が正常にユーチューブのAPIを呼び出すことが許さ作る

class Searchbox extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     searchText: '' 
 
    }; 
 
    } 
 

 
    handleSearchClick = e => { 
 
    var url = "https://www.googleapis.com/youtube/v3/search"; 
 
    var key = "AIzaSyCBPX-gonEMREh2OyT3S9Q7oaxBFaxkBZs"; 
 
    var searchresult = this.state.searchText; 
 
    var fullUrl = url + key + searchresult; 
 
    this.props.search(fullUrl); 
 
    }; 
 

 
    handleInputChange = e => { 
 
    this.setState({ searchText: e.target.value }); 
 
    }; 
 

 
    render() { 
 
    return (
 
     <div> 
 
     <form id="search-term"> 
 
      <input 
 
      ref="query" 
 
      type="text" 
 
      value={this.state.searchText} 
 
      onChange={this.handleInputChange} 
 
      /> 
 
      <button 
 
      id="search-term" 
 
      type="button" 
 
      onClick={this.handleSearchClick} 
 
      > 
 
      Search 
 
      </button> 
 
     </form> 
 
     <h2 id="root">test</h2> 
 
     <h2 id="demo" /> 
 
     </div> 
 
    ); 
 
    } 
 
}

これは実際のコードで処理することを前提としています。