入力の終了時にReact Call Youtube

Question

youtube APIをyou-tube-api検索ライブラリで使用しようとしていますが、新しい検索が行われるのに問題があります。

ユーザーが入力を終了したときに呼び出すようにするsearch_youtubeという新しい関数を作成しました。私はそれを今セットアップしている方法は、関数は、HTMLページを読み込むと、継続的に呼び出されます。

これを解決する適切な方法は、ユーザーが入力を終了したときに新しい検索がレンダリングされるようにすることです。

class SearchBar extends Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
      videos: [], 
      selectedVideo: null 
     } 
    } 

    searchYoutube(event) { 
    console.log("called") 
    YTSearch({ key: API_KEY, term: event.target.value }, (videos) => { 
     this.setState({ 
     videos: videos, 
     selectedVideo: videos[0] 
     }) 
    }); 
    } 

    render() { 
    return(
     <div className="search-bar"> 
     <input onBlur={this.search_youtube(event)} /> 
     </div> 
    ) 
    } 
} 

Answer 1

彼らは、あなたがその関数を呼び出す代わりにonBlurイベントに関数を渡している、それはあなたのレンダリング関数内ですので、あなたがあなたのページをロードするたびにロードされ、これにその行を変更：

<input onBlur={event => this.search_youtube(event)} /> 

OBSを。 矢印機能について詳しく知りたい場合は、articleをご確認ください。