0

我是反应的初学者。在制作自己的 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;

这个搜索栏输入。

请帮忙！谢谢！！

4

1 回答 1

0

React.Component首先，使用 ES6 语法清理您的引用。相反，回到你的 import 语句并像这样重构它：

import React, { Component } from 'react';

这可以使您的代码保持一致，就像您在App组件中执行此操作一样。不要忘记将 change 从React.Component变为 just Component。是的，它的语法糖，但它确实让你的代码看起来更干净和一致。

SearchBar其次，让我们谈谈在组件内部处理用户事件。您可以定义一个名为的方法：

onInputChange() {

}

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

接下来，您想将该方法传递给输入元素。所以你看到你是如何拥有的：<input onChange={(e) =>this.setState({word: e.target.value})}/>，你是在正确的轨道上。像这样重构它：

<input onChange={this.onInputChange}/>

每当用户与它们交互时，所有 HTML 输入元素都会发出一个更改事件，这是浏览器中的正常 HTML 事件。如您所见，要利用正常的浏览器事件，我们所要做的就是通过this.onInputChange花括号内的事件处理程序引用。

正如你所知，我们将它用大括号括起来，因为我们在 JSX 中插入了 JavaScript 变量。

因此，我们创建了一个新的输入元素，并为其传递了onChange一个值为 的属性this.onInputChange。

继续并像这样声明事件处理程序，然后您必须像这样event在事件处理程序中作为参数传递：

onInputChange(event) {

}

由 html 元素触发的所有浏览器事件，事件处理程序始终称为event对象。该event对象描述有关发生的事件的上下文。在这种情况下，由于它是一个输入元素，您可以使用该event对象来访问输入的值，换句话说，输入什么文本来触发更改，无论是“SOMETHING”还是“其他东西”。

您可以像这样通过控制台日志记录来测试它event.target.value：

onInputChange(event) {
  console.log(event.target.value);
}
于 2018-12-06T00:32:24.813 回答