React新手求教：如何区分调用回调函数的Dropdown组件？

嘿，完全不用不好意思，刚接触React的时候遇到这种组件区分的问题太正常啦！下面给你两种简单实用的方法，帮你轻松搞定这个需求：

方法一：给回调传递额外的标识参数 #

这是最直接的方式——在给每个Dropdown绑定回调时，额外传一个能标识它的参数（比如名字、key值），这样回调函数就能知道是哪个组件触发的啦。

完整代码示例 #

import React, { Component } from 'react';
import { Dropdown } from './components/dropdown';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      // 用两个变量分别存两个Dropdown的选中值
      selectedFromFirst: '',
      selectedFromSecond: ''
    };
    // 绑定回调函数的this
    this.handleDropdownSelect = this.handleDropdownSelect.bind(this);
  }

  handleDropdownSelect(selectedValue, dropdownId) {
    // 根据dropdownId区分是哪个组件，更新对应的state
    if (dropdownId === 'first') {
      this.setState({ selectedFromFirst: selectedValue });
    } else if (dropdownId === 'second') {
      this.setState({ selectedFromSecond: selectedValue });
    }
  }

  render() {
    const { selectedFromFirst, selectedFromSecond } = this.state;
    return (
      <div>
        {/* 第一个Dropdown，传递标识'first' */}
        <Dropdown
          options={['选项A', '选项B', '选项C']}
          onSelect={(value) => this.handleDropdownSelect(value, 'first')}
          placeholder="选择第一个值"
        />

        {/* 第二个Dropdown，传递标识'second' */}
        <Dropdown
          options={['选项1', '选项2', '选项3']}
          onSelect={(value) => this.handleDropdownSelect(value, 'second')}
          placeholder="选择第二个值"
        />

        {/* 展示选中结果 */}
        <div className="result">
          <p>第一个Dropdown选中：{selectedFromFirst || '未选择'}</p>
          <p>第二个Dropdown选中：{selectedFromSecond || '未选择'}</p>
        </div>
      </div>
    );
  }
}

export default App;

对应的Dropdown组件示例（供参考） #

import React, { Component } from 'react';

class Dropdown extends Component {
  handleChange = (e) => {
    const selectedValue = e.target.value;
    // 调用父组件传过来的onSelect，把选中值传回去
    this.props.onSelect(selectedValue);
  };

  render() {
    const { options, placeholder } = this.props;
    return (
      <select onChange={this.handleChange} defaultValue="">
        <option value="" disabled>{placeholder}</option>
        {options.map((option, index) => (
          <option key={index} value={option}>{option}</option>
        ))}
      </select>
    );
  }
}

export default Dropdown;

方法二：为每个Dropdown单独写回调函数 #

如果你的Dropdown数量不多，也可以给每个组件单独绑定一个回调，这样逻辑更直观：

// 在App组件的构造函数里绑定两个回调
this.handleFirstDropdownSelect = this.handleFirstDropdownSelect.bind(this);
this.handleSecondDropdownSelect = this.handleSecondDropdownSelect.bind(this);

// 然后写两个单独的回调函数
handleFirstDropdownSelect(value) {
  this.setState({ selectedFromFirst: value });
}

handleSecondDropdownSelect(value) {
  this.setState({ selectedFromSecond: value });
}

// 渲染Dropdown时分别绑定
<Dropdown
  options={['选项A', '选项B', '选项C']}
  onSelect={this.handleFirstDropdownSelect}
  placeholder="选择第一个值"
/>
<Dropdown
  options={['选项1', '选项2', '选项3']}
  onSelect={this.handleSecondDropdownSelect}
  placeholder="选择第二个值"
/>

这种方法适合组件数量少的场景，代码可读性更高；如果Dropdown数量多的话，还是第一种传递标识的方法更高效哦～

内容的提问来源于stack exchange，提问作者Malvinka