YTSearchbar термин подключиться к панели поиска - PullRequest
Новая
       10

YTSearchbar термин подключиться к панели поиска

0 голосов
/ 10 октября 2018

Я начинающий реагировать.Пока я создавал свое собственное приложение для 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;

эту строку поиска.

, пожалуйста, помогите!спасибо !!

1 Ответ

0 голосов
/ 06 декабря 2018

Сначала очистите ссылку на React.Component, используя синтаксис ES6.Вместо этого вернитесь к своему оператору импорта и выполните его рефакторинг следующим образом: 

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 в браузере.Чтобы подключиться к обычному событию браузера, все, что нам нужно сделать, это сослаться на обработчик событий через this.onInputChange в фигурных скобках, как вы видите выше.

И, как вы знаете, мы заключаем его в фигурные скобки, потому что мывставка переменных JavaScript внутри JSX.

Итак, мы создаем новый элемент ввода и передаем ему свойство onChange со значением this.onInputChange.

. Идем дальше и объявляем обработчик событиянапример, и тогда вам нужно будет передать event в качестве аргумента внутри обработчика событий следующим образом: 

onInputChange(event) {

}

Все события браузера, которые запускаются html-элементами, обработчик событий всегда называется event объект.Объект event описывает контекст произошедшего события.В этом случае, поскольку он является элементом ввода, вы можете использовать объект event, чтобы получить доступ к значению ввода, другими словами, какой текст был введен для запуска изменения, будь то "ЧТО-ТО" или "что-то"else ".

Вы можете проверить это, войдя в консоль event.target.value примерно так: 

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