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

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'));

Поэтому, если я поставлю что-либо в термине "ЧТО-ТО", то я хочу, чтобы оно автоматически перешло в

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

Во-первых, очистите вашу ссылку на 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 объект, чтобы получить доступ к значению ввода, другими словами, какой текст был введен, чтобы вызвать изменение, было ли это "ЧТО-ТО" или "что-то еще".

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

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