Javascript 将事件侦听器添加到我的页面会导致问题

出于某种原因，我正在使用react制作一个nodejs应用程序，当我运行Thread start时，我得到以下错误类型error:btn_bmi.addEventListener不是一个函数。有人知道为什么会这样设置吗？在过去我不确定是什么原因导致了这个错误

import React from 'react';


var btn_bmi = document.getElementsByClassName('bmi_button');
     btn_bmi.addEventListener('click', calculate_bmi());

    function calculate_bmi() {
        let Weight = document.getElementsByClassName('bmi_weight').value;
        let Height = document.getElementsByClassName('bmi_height').value;
        let Age = document.getElementsByClassName('bmi_age').value;
        let Test = document.getElementsByClassName('test_print');
        let bmi_calc = Weight / Height / Height * 10000;
        let bmr_calc = 88.2 + (13.362 + Weight) + (4.799 + Height) - (5.677 + Age);

        //if nothing entered show error
        if (Weight, Height, Age == 0){
            alert("Please enter your Height, Weight and Age so we can achieve your goals!")
            }
            else{
            //
            Test.innerHTML = document.write= bmi_calc + bmr_calc;
            }

    }

function setup_page () {
    return (
    <div className='setup_main'>
     <input className= 'bmi_weight' type='number' placeholder='Weight in kg:'></input>
     <input className= 'bmi_height' type='number' placeholder='Height in cm:'></input>
     <input className= 'bmi_age' type='number' placeholder='Age:'></input>
     <button className='bmi_button'>calculate</button>
     <p className='test_print'></p>
     </div>
    );
    }

export default setup_page;

返回一个，而不是一个HTML元素。这是因为可以有多个具有相同类名的元素

如果要假设只有一个返回，请替换为：

var btn_bmi = document.getElementsByClassName('bmi_button')[0];

或者，IMO清洁剂：

const btn_bmi = document.querySelector('.bmi_button');

但实际上，最好的做法是将事件侦听器放在JSX中；这样，当React输出DOM并重新渲染时，事件的附加/分离将由您负责：

<button className='bmi_button' onClick={calculate_bmi}>calculate</button>

返回一个，而不是一个HTML元素。这是因为可以有多个具有相同类名的元素

如果要假设只有一个返回，请替换为：

var btn_bmi = document.getElementsByClassName('bmi_button')[0];

或者，IMO清洁剂：

const btn_bmi = document.querySelector('.bmi_button');

但实际上，最好的做法是将事件侦听器放在JSX中；这样，当React输出DOM并重新渲染时，事件的附加/分离将由您负责：

<button className='bmi_button' onClick={calculate_bmi}>calculate</button>

---

React创建document.querySelector和其他类似函数无法访问的虚拟DOM。如果您希望访问react创建的内容，那么如果您使用的是类组件，那么必须使用它；如果您使用的是函数组件，那么必须使用hook useRef。名称可以是其他名称，但我的意思是：const MyComponent=props=>。出于您的目的，您应该创建一个表单，将其值保存在this.state或useState钩子的状态中 编辑

---

下面的答案也很正确，但如果您使用React呈现html，document.GetElementsByCassName的结果将返回空集合

React创建document.querySelector和其他类似函数无法访问的虚拟DOM。如果您希望访问react创建的内容，那么如果您使用的是类组件，那么必须使用它；如果您使用的是函数组件，那么必须使用hook useRef。名称可以是其他名称，但我的意思是：const MyComponent=props=>。出于您的目的，您应该创建一个表单，将其值保存在this.state或useState钩子的状态中 编辑

---

下面的答案也很正确，但如果您使用React来呈现html文档的结果。getElementsByClassname将返回空集合

如果Weight，Height，Age==0{可能不会执行您认为的操作。

如果Weight，Height，Age==0也会返回空集合{可能不会像你认为的那样做。

你不应该以这种方式混合使用普通的JS DOM方法和React代码。尝试使用React方法和工具，而不是onClick而不是addEventListeners，使用组件而不是innerHTML等。这段代码需要一些繁重的重构。你得到的类型错误应该是你最不关心的rn IMHO。这能回答你的问题吗？我真的是一个新手，所以我试图借鉴我以前使用javascript的经验，但这显然不是正确的实现var btn_bmi=document.getElementsByClassName'bmi_button'；返回一个HTMLCollection对象一个类似数组的对象，它没有.addEventListener方法。你必须从集合中获取一个或多个项，并对每个项调用.addEventListener，或者使用不同的方法，如document.querySelector，该方法只返回单个DOM元素。不应以这种方式混合使用普通JS DOM方法和React代码。请尝试使用React方法和工具，而不是onClick而不是addEventListeners，组件，而不是使用innerHTML等。这段代码需要进行一些重重构。你得到的类型错误应该是你最不关心的问题。这回答了你的问题吗？我真的是一个新手，所以我试图借鉴我以前使用javascript的经验，但它显然不是正确的实现var btn_bmi=document.getElementsByClassName'bmi_button'；返回一个HTMLCollection对象一个类似数组的对象，该对象没有.addEventListener方法。您必须从集合中获取一个或多个项，并对每个项调用.addEventListener，或者使用一个不同的方法，例如document.querySelector，该方法只返回一个DOM元素。非常感谢h我是新手，虽然我对javascript和html有一些经验，但这对我来说还是新的哈哈非常感谢我是新手，虽然我对javascript和html有一些经验，但这对我来说还是新的哈哈