Javascript 添加事件列表器不是一个函数

我正在尝试向按钮添加事件侦听器，以便在按下按钮时可以向容器中添加值

<div className="grid-container">
            <div>
            <button id="redBet" className="redButton" onclick={this.handleBetsRed}>Place Red</button>
            <div id="redSearch" class="ui search">
              <input class="prompt" type="text" placeholder="Common passwords..." />
                <div class="results">
                  <p className="para"></p>
                </div>
                </div>
            </div>

---

此函数不在任何函数中，且位于render、return语句的正上方。

将

红色按钮中的
onclick
替换为
onclick
，并从单击处理程序函数中删除
getElementsByClassName

<div className="grid-container">
  <div>
    <button id="redBet" className="redButton" onClick={this.handleBetsRed}>Place Red</button>
    <div id="redSearch" class="ui search">
      <input class="prompt" type="text" placeholder="Common passwords..." />
        <div class="results">
          <p className="para"></p>
        </div>
    </div>
  </div>
</div>

有两个问题,

1:
这里，返回包含匹配节点的
HTMLCollection
，而不是单个on。所以，你可能想做这样的事情

document.getElementsByClassName("redButton")[0]

或者，你可以使用

2:
放置红色

这里，
onclick
是指
onclick
getElementsByClassName（）
返回节点列表而不是单个元素。这是否回答了您的问题？在使用反应时，不要考虑使用QuestS选择器。没必要。改为使用ref。此问题有重复项。请你把它标记成这样好吗？谢谢你的帮助你好，这个问题有一个重复的。请你把它标成这样好吗？谢谢你的帮助
handleBetsRed = () => {
  console.log("Yeet")
}

document.getElementsByClassName("redButton")

document.getElementsByClassName("redButton")[0]

document.querySelector(".redButton")

 <button id="redBet" className="redButton" onclick={this.handleBetsRed}>Place Red</button>