Javascript 在React应用程序中初始化时触发按钮onClick

我正在尝试制作一个简单的下拉菜单，但是我在子组件中的列表项上的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>
    );
  }
}

从“React”导入React；
从“./../elements/Dropdown.js”导入下拉列表！jsx′；
导出类TestPage扩展React.Component{
构造函数（）{
超级（）；
this.noteLIst=[
{name:'note'，label:'note global'}，
{名称：'digitalCulture'，标签：'digitalCulture'}
];
}
handleItemClick（公司）{
控制台日志（公司）；
}
render（）{
返回(
);
}
}

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); // 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>
    );
  }
}

从“React”导入React；
导出类下拉列表扩展了React.Component{
构造函数（）{
超级（）；
此.state={
listVisible:错误
};
}
showMenu（）{
这是我的国家({
listVisible:正确
});
document.addEventListener（“单击”，this.hide）；
}
隐藏（）{
这是我的国家({
listVisible:错误
});
document.removeEventListener（“单击”，this.hide）；
}
把手舔（项目）{
console.log（item）；//这里将记录2项
单击（项目）时的此.props；
}
render（）{
让listItems=uz.map（this.props.list，（list，index）=>{
返回(
{list.name}
);
});
返回(
{this.props.selected.name}

{listItems}

);
}
}

当您使用onClick事件并希望将参数传递给handler方法时，必须使用函数

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

从“React”导入React；
导出类下拉列表扩展了React.Component{
构造函数（）{
超级（）；
此.state={
listVisible:错误
};
}
showMenu（）{
这是我的国家({
listVisible:正确
});
document.addEventListener（“单击”，this.hide）；
}
隐藏（）{
这是我的国家({
listVisible:错误
});
document.removeEventListener（“单击”，this.hide）；
}
把手舔（项目）{
console.log（item）；//单击时它将是log 1项
单击（项目）时的此.props；
}
render（）{
让listItems=uz.map（this.props.list，（list，index）=>{
返回(
{list.name}
);
});
返回(
{this.props.selected.name}

{listItems}

);
}
}

Answer是有效的，但对bind的概念进行解释会很有用。