YTSearchbar 术语连接到搜索栏

问题描述 投票:0回答:1

我是反应初学者。当我制作自己的 YouTube 应用程序时,我想将 YTSearchbar 术语连接到我的应用程序上的搜索栏。

这里

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/SearchBar';
import YTSearch from 'youtube-api-search';
import VideoList from './components/VideoList';

const API_KEY = 'AIzaSyA5JE7QYKFSlEnRij3tqxYS2XWqG0Au20o';


class App extends Component {
constructor(props) {
    super(props);

    this.state = { videos: [] };

    YTSearch({key: API_KEY, term: "dong"}, (videos) => {
        this.setState({videos}); //access videos on state
      });
}

render() {
    return (
      <div>
        <h1>DongHyun's Youtube Channel</h1>
        <SearchBar />
        <VideoList videos={this.state.videos} />
      </div>
    );
}
}
ReactDOM.render(<App />, document.getElementById('root'));

因此,如果我输入任何术语:“某物”,那么我希望它自动进入

import React from 'react';
import Button from 'material-ui/Button';

class SearchBar extends React.Component{
constructor(props) {
    super(props);

    this.state = { word: '' };
}

render() {
return (
    <div>
     <input 
     value = {this.state.word}
     onChange={(e) =>this.setState({word: e.target.value})}/>
     <Button color="secondary">Search</Button>
    </div>
    );
}
}

export default SearchBar; 

这个搜索栏输入。

请帮忙!谢谢!!

reactjs api react-native react-redux searchbar
1个回答
0
投票

首先,使用 ES6 语法清理对

React.Component
的引用。相反,返回到导入语句并像这样重构它:

import React, { Component } from 'react';

这可以使您的代码保持一致,就像您在

App
组件中所做的那样。不要忘记将更改从
React.Component
更改为
Component
。是的,它是语法糖,但它确实使您的代码看起来更干净、一致。

其次,我们来谈谈在

SearchBar
组件内部处理用户事件。您可以定义一个名为的方法:

onInputChange() {

}

就在您的

render()
方法下方。另一种方法名称是
handleInputChange()
,这取决于你。所以一般来说,它以
on
handle
开头,然后是您正在观察变化的元素的名称,在您的例子中是输入元素。因此,每当输入发生变化时,JavaScript 就会运行您要放置在上述方法中的代码。

接下来,您想要将该方法传递给输入元素。所以你会看到你的情况:

<input onChange={(e) =>this.setState({word: e.target.value})}/>
,你有点走在正确的轨道上。像这样重构它:

<input onChange={this.onInputChange}/>

每当用户与 HTML 输入元素交互时,所有 HTML 输入元素都会发出更改事件,这是浏览器中的正常 HTML 事件。要利用正常的浏览器事件,我们所要做的就是通过大括号内的

this.onInputChange
引用事件处理程序,如上所示。

正如您所知,我们将其括在大括号中,因为我们要在 JSX 中插入 JavaScript 变量。

因此,我们创建一个新的输入元素,并向其传递一个属性

onChange
,其值为
this.onInputChange

继续像这样声明事件处理程序,然后您必须将

event
作为事件处理程序中的参数传递,如下所示:

onInputChange(event) {

}

所有由 HTML 元素触发的浏览器事件,事件处理程序始终称为

event
对象。
event
对象描述了发生的事件的上下文。在这种情况下,由于它是一个输入元素,因此您可以使用
event
对象来访问输入的值,换句话说,输入什么文本来触发更改,无论是“SOMETHING”还是“something”否则”。

您可以通过控制台日志记录

event.target.value
来测试它,如下所示:

onInputChange(event) {
  console.log(event.target.value);
}
© www.soinside.com 2019 - 2024. All rights reserved.