Question

我是React的新手。为什么我的数据不能传递到另一个组件？我的想法是在用户选择选项标签之后，然后它将根据选择加载一些音频文件。但它不起作用。我错过了什么？

还是有更好的做法吗？

这是我的下拉组件

import React from 'react';
import Playlist from './Playlist/Playlist.js';

class Dropdown extends React.Component {
  constructor (props) {
    super(props);
    this.state = {value: "1"};

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

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

    console.log("Hello");
    console.log(event.target.value);
    console.log(typeof(event.target.value));
  }

  handleEnter(event) {

    alert("Clicked: " + this.state.value);
    event.preventDefault();
  }

  render (){
    return (
      <form onSubmit={this.handleEnter} >
        <label>
        <div className="langueageSelection">
          <Playlist langueageSelection={this.handleChange.bind(this)} />

          <select value={this.state.value} onChange={this.handleChange} >

            <option value=""> Please select a language </option>
            <option value="1"> English (American) </option>
            <option value="2"> Chinese (Mandarin) </option>
          </select>

      </div>
    </label>
    <input type="submit" value="Enter" className="EnterButton"/>
  </form>
);
}
}

export default Dropdown;

这是我的播放列表组件。

import React from 'react';
class Playlist extends React.Component {

  handleChange({target}){
    this.props.langueageSelection(target.value)
  }

  render() {
    if (this.props.langueageSelection === "1"){
      console.log("English");

    }
    else if(this.props.langueageSelection === "2"){
      console.log("Chinese");
    }
    return (
      <div> Hi</div>
     );
 }
}

export default Playlist;

这是我的参赛作品：

import React from 'react';
import mind_zebra from '../../images/MindScribe-zebra.png';
import Dropdown from '../Dropdown/Dropdown.js';


class Entry extends React.Component {

  state = { hideZebraPic : false};

  onClickHandler = () => {
    this.setState( prev => ({ hideZebraPic : !prev.hideZebraPic }));
  };

  render() {
    if (this.state.hideZebraPic) {
      return (
        <div>
          <Dropdown />
        </div>
      );
    } else {
      return (
        <div>
          <img src={mind_zebra} onClick={this.onClickHandler} className="MindZebraPic" alt="zebra"/>
        </div>
      );
    }
  }
}

这是我的目录结构：

src
  |
  audio
    - English audios
    - Chinese audios
  components
     |
     Dropdown
        |
        playlist
          - playlist.js
        dropdown.js
     |
     Entry
         |
         entry.js
     |
     Home
         |
         App.js

Answer 1

也许你可以说明究竟什么不起作用？播放列表未收到所选语言？应该吗？

因为现在看起来像这样：

<Playlist langueageSelection={this.handleChange.bind(this)} />

您将功能传递给播放列表，对吗？据我所知，播放列表的作用是根据父组件中的选择（即Dropdown）呈现一些内容？为什么要将函数传递给子组件？你为什么要用.bind（这个）来装饰它？你已经绑定了＃34;它＆＃34;已经在构造函数中（这是＆＃34; Dropdown＆＃34;据我所知）。

如果你真的需要让它按原样运行：

在下拉列表中，传递＆＃34;值＆＃34;作为孩子的支柱

<Playlist langueageSelection={this.state.value} />

在播放列表中，我不太确定您是否需要传递此功能。

import React from 'react';
class Playlist extends React.Component {


  render() {
    if (this.props.langueageSelection === "1"){
      console.log("English");

    }
    else if(this.props.langueageSelection === "2"){
      console.log("Chinese");
    }
    return (
      <div> Hi</div>
     );
 }
}

export default Playlist;

进一步发展：

我认为您可以与React的一些编程模式联系。请对无状态组件进行一些研究，以更新父母的状态＆＃34;。我不知道你对整个应用程序的想法，但我觉得播放列表不应该是Dropdown的孩子。我建议这样的事情：

下拉列表和播放列表是兄弟姐妹。让我们说他们的父母App。应用程序是有状态组件。下拉列表和播放列表是无状态组件。应用程序将函数ChangeLanguage传递给Dropdown。 ChangeLanguage绑定到App。函数ChangeLanguage处理Dropdown中的lang选择，获取事件并使用event.target.value更新App状态。然后App将其状态作为道具传递给播放列表。

我希望我理解你的问题。

Answer 2

还是有更好的做法吗？

请Single source of truth或Redux

查看MobX及其实施情况

如何在Reactjs中的两个组件之间进行通信

2 个答案: