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

Question

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

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

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

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

https://github.com/kdelalic/Shuffle

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

searchBar.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

除了一个异常(exception)，这看起来相对不错。

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

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

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

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

绑定(bind)属性

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

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

在构造函数中绑定(bind)

正如您已经完成的那样，您可以将函数的 this 上下文绑定(bind)到构造函数中的父级。

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

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

ES 类属性箭头函数

这是我个人最喜欢的。缺点是您需要 babel 和第二阶段提案来转译您的代码。

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

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