如何使用我的搜索功能更新 Youtube 视频

Question

我正在尝试将搜索查询从 searchBar 中的输入传递到应用程序.js.js然后返回到其子视频中，以便搜索视频并播放它。

我

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

我需要重新渲染视频组件或类似的东西吗？

我正在使用 react-youtube 模块与 YoutubeAPI 进行反应集成。

https://github.com/kdelalic/Shuffle

应用.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>
        );
    }
}

顶栏.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>
    );
  }
}

搜索栏.js类：

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

Answer 1

除了一个例外，这看起来相对不错。

myCallback(dataFromChild) {
  this.props.parentCallBack(dataFromChild);
}
// ...when being used
<SearchBar callBack={this.myCallback}/>

问题是，当从 Child 调用 callBack 函数时，函数的this设置为子组件。

将函数作为回调传递给子级时，您有几个选项。

绑定属性

<SearchBar callBack={this.myCallback.bind(this)}/>

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

在构造函数中绑定

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

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

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

ES 类属性箭头函数

这是我个人的最爱。缺点是你需要 babel 和阶段 2 提案来转译你的代码。

class TopBar extends Component {
  myCallback = () => {
    // ...
  }
  render() {
    <SearchBar callback={this.myCallback} />
  }
}