如何区分哪个组件调用了回调函数？

Question

我是新来的反应，对不起，如果这是新问题。我有一个下拉组件，它通过回调函数返回一个值。我想渲染两次以选择两个不同的值，然后简单地在下面渲染选择的值。我怎样才能让你的两个不同的组件向组件发送不同的数据。下面是我的代码。

index.js

import { Dropdown } from './components/dropdown'

class App extends Component {
  constructor(props) {
    super(props);
    this.calculateRate = this.calculateRate.bind(this);
    this.callApi = this.callApi.bind(this);
    this.state = {
      response: "",
      currA: 0,
      currB: 1
    }
  }

  componentDidMount() {

    this.callApi()
      .then(res => this.setState({ response: res.express }))
      .catch(err => {console.log(err)});

  }

  callApi = async () => {
    const response = await fetch('/main');
    const body = await response.json();
    if (response.status !== 200) throw Error(body.message);
    return body;
  }

  calculateRate = (key, val) => {
    // if the calling agent sent currA data, update currA,
    // else if the calling agent sent currB data, update currB
    if (key === 'A') this.setState({currA: val})
    if (key === 'B') this.setState({currB: val})
    console.log('updated curr' + key + ' to ' + val);
  }

  render() {
    return (
      <div className='App'>
        <div>
          <Dropdown callbackFromParent={this.calculateRate}
            stateKey={'A'} val={this.state.currA} />
          <Dropdown callbackFromParent={this.calculateRate}
            stateKey={'B'} val={this.state.currB} />
        </div>
      </div>
    );
  }
}


export default App;

dropdown.js

export class Dropdown extends React.Component {

  constructor(props){
    super(props);
    this.state = {
      list: [],
      selected: ""
    };
  }

componentDidMount(){
  fetch('https://api.fixer.io/latest')
    .then(response => response.json())
    .then(myJson => {
      this.setState({ list: Object.keys(myJson.rates) });
    });
}

  render(){
    var selectCurr = (curr) =>
     <select
      onChange={event => props.callbackFromParent(props.stateKey, event.target.value)}
     >
     {(this.state.list).map(x => <option>{x}</option>)}
     </select>;

    return (
      <div>
        {selectCurr()}
      </div>
    );
  }
}

Answer 1

我不确定您要实现什么，但希望以下内容显示您如何允许两个不同的组件将不同的数据发送到 <App> 组件。

重要的变化是：我们需要将方法绑定到constructor()函数中的<App>组件，然后我们可以使用Dropdown组件中的.bind()方法来指定要传入回调的数据功能：

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props);
    this.calculateRate = this.calculateRate.bind(this);
    this.callApi = this.callApi.bind(this);
    this.state = {
      response: "",
      currA: 0,
      currB: 1
    }
  }

  componentDidMount() {
    /*
    this.callApi()
      .then(res => this.setState({ response: res.express }))
      .catch(err => {console.log(err)});
    */
  }

  callApi = async () => {
    const response = await fetch('/main');
    const body = await response.json();
    if (response.status !== 200) throw Error(body.message);
    return body;
  }

  calculateRate = (key, val) => {
    // if the calling agent sent currA data, update currA,
    // else if the calling agent sent currB data, update currB
    if (key === 'A') this.setState({currA: val})
    if (key === 'B') this.setState({currB: val})
    console.log('updated curr' + key + ' to ' + val);
  }

  render() {
    return (
      <div className='App'>
        <div>
          <Dropdown callbackFromParent={this.calculateRate}
            stateKey={'A'} val={this.state.currA} />
          <Dropdown callbackFromParent={this.calculateRate}
            stateKey={'B'} val={this.state.currB} />
        </div>
      </div>
    );
  }
}

const Dropdown = props => (
  <select onChange={event => props.callbackFromParent(props.stateKey, event.target.value)}>
    <option value='cats'>Cats</option>
    <option value='dogs'>Dogs</option>
  </select>
)

export default App;