Question

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

因此，如果我在“ SOMETHING”一词中加上任何内容，那么我希望它自动进入

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;

此搜索栏输入。

请帮助！谢谢！

Answer 1

首先，使用ES6语法清理对React.Component的引用。相反，返回到您的import语句并按如下方式重构它：

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输入元素都会发出一个change事件，这就是浏览器中的正常HTML内容。要利用正常的浏览器事件，我们所要做的就是通过大括号内的this.onInputChange引用事件处理程序，如上所示。

而且您知道我们将其用花括号括起来，因为我们正在JSX内插入JavaScript变量。

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

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

onInputChange(event) {

}

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

您可以通过控制台记录event.target.value进行测试，如下所示：

onInputChange(event) {
  console.log(event.target.value);
}

YTSearchbar术语连接到Searchbar

1 个答案: