Question

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

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

我是否需要重新呈现视频组件或类似内容？

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

app.js（parent）class：

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

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

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} />
  }
}

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

1 个答案: