0
我有一个简单的应用程序来搜索YouTube。当我运行它时,我没有得到任何错误,但是当我点击搜索按钮时没有发生任何事情!用React搜索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>
)
}
}
我试图修复它,并加入反应开发工具,但它似乎只是不渲染。
辉煌,谢谢! – Nespony