Javascript 如何使用搜索功能更新Youtube视频？

我试图将搜索查询从searchBar.js中的输入传递到app.js，然后返回到其子视频中，以便搜索视频并播放它

我不确定我做错了什么，因为视频没有更新

我需要重新播放视频组件或类似的东西吗

我正在使用react youtube模块与YoutubeAPI进行react集成

app.js父类：

import React, { Component } from 'react';
import "../css/app.css";
import Video from "./video";
import TopBar from "./topBar";

export default class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            searchQuery: null
        };    
    }

    myCallback(dataFromChild) {
        this.setState({ searchQuery: dataFromChild });
    }

    render() {
        return (
          <div>
            <TopBar parentCallBack={this.myCallback}/>
            <Video query={this.state.searchQuery} />
          </div>
        );
    }
}

topBar.js类：

import React, { Component } from 'react';
import {Navbar} from 'react-materialize';
import '../css/topBar.css';
import SearchBar from './searchBar'


export default class TopBar extends Component {

  myCallback(dataFromChild) {
    this.props.parentCallBack(dataFromChild);
  }

  render() {
    return (
      <div className="wrapper">
        <Navbar className="logo" brand='Shuffle+' right>
          <SearchBar callBack={this.myCallback}/>
        </Navbar>
      </div>
    );
  }
}

import React, { Component } from 'react';
import {NavItem, Icon} from 'react-materialize';
import '../css/searchBar.css';

export default class SearchBar extends Component {

  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }


  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    this.props.callBack(this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <div className="wrapper">
        <form className="form" onSubmit={this.handleSubmit}>
          <label>
            <input className="input" type="text" value={this.state.value} onChange={this.handleChange} />
          </label>
        </form>
        <NavItem className="searchButton">
              <Icon>search</Icon>
        </NavItem>
      </div>
    );
  }
}

searchBar.js类：

import React, { Component } from 'react';
import {Navbar} from 'react-materialize';
import '../css/topBar.css';
import SearchBar from './searchBar'


export default class TopBar extends Component {

  myCallback(dataFromChild) {
    this.props.parentCallBack(dataFromChild);
  }

  render() {
    return (
      <div className="wrapper">
        <Navbar className="logo" brand='Shuffle+' right>
          <SearchBar callBack={this.myCallback}/>
        </Navbar>
      </div>
    );
  }
}

import React, { Component } from 'react';
import {NavItem, Icon} from 'react-materialize';
import '../css/searchBar.css';

export default class SearchBar extends Component {

  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }


  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    this.props.callBack(this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <div className="wrapper">
        <form className="form" onSubmit={this.handleSubmit}>
          <label>
            <input className="input" type="text" value={this.state.value} onChange={this.handleChange} />
          </label>
        </form>
        <NavItem className="searchButton">
              <Icon>search</Icon>
        </NavItem>
      </div>
    );
  }
}

---

除了一个例外，这看起来相对来说还行

myCallback(dataFromChild) {
  this.props.parentCallBack(dataFromChild);
}

// ...when being used
<SearchBar callBack={this.myCallback}/>

缺点是每次调用渲染函数时都会复制该函数

在构造函数中绑定

如前所述，可以将函数的此上下文绑定到构造函数中的父级

class TopBar extends Component {
  constructor() {
    // ...
    this.myCallback = this.myCallback.bind(this);
  }
}

缺点是它很简洁，您必须为需要绑定到组件的每个函数编写它

ES类属性箭头函数

这是我个人的最爱。缺点是您需要babel和第2阶段提案来传输代码

class TopBar extends Component {
  myCallback = () => {
    // ...
  }

  render() {
    <SearchBar callback={this.myCallback} />
  }
}

---

谢谢，我用了你的babel实现。效果很好。虽然我不知道为什么我的实现不起作用。我能够将搜索字符串传递给app.js类。我使用alert函数对其进行了测试，它将警告正确的术语。为什么不在视频组件内部传递相同的变量来查询？我不太确定，我必须查看代码才能知道。在其中一个示例中，您可能已将其绑定到组件。您必须绑定它的原因是您正在从另一个组件调用函数。它的值不是由声明它的位置决定的，而是由调用它的位置决定的。在这种情况下，函数可能会抛出错误或设置错误的属性。