Question

我试图在you-tube-api搜索库中使用youtubes 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)} />

OB的。如果您想了解有关箭头功能的更多信息，请查看此article。

在输入

1 个答案: