Question

我是反应灵的新手。我想单击一个图像，然后转到下拉组件，然后每当我切换语言选择时，它将在播放列表组件的控制台中输出不同的语言。

播放列表组件和下拉组件是兄弟姐妹。我该怎么做？我尝试将一个函数传递给下拉组件，但没有任何反应。

家长：entry.js

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

 export default class Entry extends React.Component {
     constructor (props) {
     super(props);

     this.state = {
      value : "1",
      hideZebraPic : false,
     }

     this.changeLanguage = this.changeLanguage.bind(this);
    }

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

     changeLanguage (event) {
     console.log("hello");
     this.setState({ value: event.target.value });
    }

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

一个孩子：下拉组件

import React from 'react';

export default class Dropdown extends React.Component {

  changeLanguage(event) {
    this.setState({ value: event.target.value });
    console.log("hello");
  }

  render () {
    return (
      <form >
        <label>
          <div className="langueageSelection">
            <select onChange={this.handleChange}>

              <option value=""> Please select a language </option>
              <option value="1"> English </option>
              <option value="2"> Chinese </option>
            </select>
          </div>
        </label>
      </form>
    );
  }
}

第二个孩子：播放列表组件

import React from 'react';

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

Answer 1

首先在下拉组件中使用this.setState但是没有状态。

在Entry组件中使用getter函数。

 this.state = {
      value : "1",
      hideZebraPic : false,
      Language:'',
     }

getLanguage = (language) => this.setState({Language:language})

将函数getLanguage作为下拉函数传递给下拉列表。

渲染中的

执行此操作

<Dropdown getLanguage={this.getLanguage}/>

现在在下拉组件

中

 <select onChange={(e) => this.props.getLanguage(e.target.value)}>
              <option value=""> Please select a language </option>
              <option value="1"> English </option>
              <option value="2"> Chinese </option>
            </select>

现在你可以在任何地方使用this.props.Language，如果你把它作为道具传递到条目内的组件。

您需要弄清楚的是当您想要渲染播放列表组件时。

如何将函数传递给reactjs中的子（兄弟）组件？

1 个答案: