我正在尝试制作一个简单的下拉菜单，但我在子组件中的列表项上的 onClick 事件上遇到一些问题，“handleClick”函数应该在单击列表项时触发，但该函数是页面加载时触发两次(因为这里有两个列表)，当我再次单击列表时，它会再次触发两次，我确信这是一个简单的问题，但我花了几个小时，但我不太明白这里发生了什么，希望有人能帮助我，谢谢!

这是我的代码:

import React from 'react'; 
import Dropdown from './../elements/dropdown.js!jsx'; 
 
export class TestPage extends React.Component { 
 
  constructor() { 
    super(); 
    this.noteLIst = [ 
      {name: 'note', label: 'Note global'}, 
      {name: 'digitalCulture', label: 'Digital Culture'} 
    ]; 
  } 
 
  handleItemClick(company) { 
    console.log(company); 
  } 
 
  render() { 
    return ( 
      <div className="widget"> 
        <Dropdown list={this.noteLIst} selected={this.noteLIst[0]} whenItemClicked={this.handleItemClick} /> 
      </div> 
    ); 
  } 
} 

下拉.js

import React from 'react'; 
 
export class Dropdown extends React.Component { 
 
  constructor() { 
    super(); 
    this.state = { 
      listVisible: false 
    }; 
  } 
 
  showMenu() { 
    this.setState({ 
      listVisible: true 
    }); 
    document.addEventListener("click", this.hide); 
  } 
 
  hide() { 
    this.setState({ 
      listVisible: false 
    }); 
    document.removeEventListener("click", this.hide); 
  } 
 
  handleClick(item) { 
    console.log(item); // Here will log 2 items 
    this.props.whenItemClicked(item); 
  } 
 
  render() { 
    let listItems = _.map(this.props.list, (list, index) => { 
      return ( 
        <li key={index} className={list} onClick={this.handleClick(list)}>{list.name}</li> 
      ); 
    }); 
 
    return ( 
      <div className = {"dropdown-container" + (this.state.listVisible ? " show" : "")}> 
        <div className = {"dropdown-display" + (this.state.listVisible ? " clicked" : "")} onClick = {this.show}> 
          <span> 
            <img className="icon-arrow-bottom" src="build/image/arrow_bottom_black.png" /> 
          </span> 
          <span> 
            {this.props.selected.name} 
          </span> 
        </div> 
        <ul className="dropdown-list" > 
          {listItems} 
        </ul> 
      </div> 
    ); 
  } 
} 

请您参考如下方法:

当您使用onClick事件并且想要将参数传递给处理方法时，您必须使用函数bind。因此，只有当您单击列表项时才会触发处理程序。

onClick={this.handleClick.bind(this, list)} 

这将是您的 Dropdown.js:

import React from 'react'; 
 
export class Dropdown extends React.Component { 
 
  constructor() { 
    super(); 
    this.state = { 
      listVisible: false 
    }; 
  } 
 
  showMenu() { 
    this.setState({ 
      listVisible: true 
    }); 
    document.addEventListener("click", this.hide); 
  } 
 
  hide() { 
    this.setState({ 
      listVisible: false 
    }); 
    document.removeEventListener("click", this.hide); 
  } 
 
  handleClick(item) { 
    console.log(item); // it will be log 1 item when you click 
    this.props.whenItemClicked(item); 
  } 
 
  render() { 
    let listItems = _.map(this.props.list, (list, index) => { 
      return ( 
        <li key={index} className={list} onClick={this.handleClick.bind(this, list)}>{list.name}</li> 
      ); 
    }); 
 
    return ( 
      <div className = {"dropdown-container" + (this.state.listVisible ? " show" : "")}> 
        <div className = {"dropdown-display" + (this.state.listVisible ? " clicked" : "")} onClick = {this.show}> 
          <span> 
            <img className="icon-arrow-bottom" src="build/image/arrow_bottom_black.png" /> 
          </span> 
          <span> 
            {this.props.selected.name} 
          </span> 
        </div> 
        <ul className="dropdown-list" > 
          {listItems} 
        </ul> 
      </div> 
    ); 
  } 
}