在 ReactJS 中有多个按钮调用一个函数答案

【问题标题】：Having multiple buttons call a function in ReactJS在 ReactJS 中有多个按钮调用一个函数
【发布时间】：2020-04-05 05:44:51
【问题描述】：

抱歉，如果标题含糊不清。我的问题是我有三个button 标签，对于每个标签，我希望它向selectSupplier() 发送一个唯一的参数。但是，无论我按什么按钮 selectSupplier() 都只会接收最后一个值（“ultramar”）作为参数。

selectSupplier(supplier){
    this.props.Obj.supplier = supplier
  }


  render() {
    //console.log("SUPPLIER", this.props)
    return (
      <div>
        <button onClick={this.showMenu}>
          Select Supplier
        </button>

        {
          this.state.showMenu
            ? (
              <div
                className="menu"
                ref={(element) => {
                  this.dropdownMenu = element;
                }}
              >
                <button value="Husky" onClick={this.selectSupplier("Husky")}> Husky </button>
                <button value="Shell" onClick={this.selectSupplier("Shell")}> Shell </button>
                <button value="Ultramar" onClick={this.selectSupplier("Ultramar")}> Ultramar</button>
              </div>
            )
            : (
              null
            )
        }
      </div>
    );

【问题讨论】：

onClick={() => this.selectSupplier("Husky")}> 你是在调用函数而不是传递对它的引用。
这能回答你的问题吗？ React js onClick can't pass value to method
@EmileBergeron 谢谢！我知道这是一个简单的解决方法，如果您想发布答案，我很乐意接受。也谢谢你的链接，给了我一些很棒的信息我会关注
这个问题已经在这个网站上回答过多次了，所以我们宁愿把它作为一个副本关闭，以便将任何人重定向到正确的地方！

标签： javascript html node.js reactjs

【解决方案1】：

你可以这样调用：

this.selectSupplier.bind(this,"Husky");

【讨论】：