用React搜索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模式。這允許組件的狀態驅動演示文稿，而不是相反。

這是你的搜索框組件的一個片段，與實施控制組件模式：

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> 
 
    ); 
 
    } 
 
}

使這一變化讓我成功地調用的YouTube API，雖然我收到了'Access-Control-Allow-Origin'錯誤，我假設你將在你的實際代碼中處理。