React.JS - 我正在尝试将 .js 文件中的函数导入 .jsx 文件，但它仍然不起作用。无法读取 null 的属性“单击”

Posted 2023-02-22

【中文标题】React.JS - 我正在尝试将 .js 文件中的函数导入 .jsx 文件，但它仍然不起作用。无法读取 null 的属性“单击”

【英文标题】：React.JS - I am trying to import functions from .js file into .jsx file, but it still doesn't work. Cannot read property 'click' of null'

【发布时间】：2019-04-09 09:31:27

【问题描述】：

我是 React 新手，并且已经设置了我的应用程序。到目前为止，我正在尝试创建一个标题，其中包含一个菜单，并在整个网站上进行。经过大量研究，我成功地做到了。现在我正在尝试做一个更复杂的菜单 - 悬停等。我目前唯一不能做的是我不能在点击类时使它们处于活动状态 - 我有代码，但我没有不知道如何正确整合它。

我已经通过 *** 了解如何导入函数并尝试过，但无济于事。这是我所有的代码和错误：

Header.jsx

import React,  Component  from 'react';
import './Header.css';
import './Header.js';
import openPage from './Header.js';
 //import  Button, Navbar, Nav, NavItem, NavDropdown, MenuItem  from 
'react-bootstrap';


class Header extends Component 
    render() 
  return (
    <div>
    <button class="tablink" onclick=openPage('Home', this, 'red')>Home</button>
    <button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
    <button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
    <button class="tablink" onclick="openPage('About', this, 'orange')">About</button>

      <div id="Home" class="tabcontent">
        <h3>Home</h3>
        <p>Home is where the heart is..</p>
      </div>

      <div id="News" class="tabcontent">
        <h3>News</h3>
        <p>Some news this fine day!</p> 
      </div>

      <div id="Contact" class="tabcontent">
        <h3>Contact</h3>
        <p>Get in touch, or swing by for a cup of coffee.</p>
      </div>

      <div id="About" class="tabcontent">
        <h3>About</h3>
        <p>Who we are and what we do.</p>
      </div>
      </div>
          );
          
        

      export default Header;

OpenPage 是我已经导入的函数，但是不能正常工作。它给了我> 23 | document.getElementById("defaultOpen").click(); 的错误'无法读取属性'click' of null''

这是 .js 文件：

    function openPage(pageName, elmnt, color) 
// Hide all elements with class="tabcontent" by default */
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) 
    tabcontent[i].style.display = "none";


// Remove the background color of all tablinks/buttons
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) 
    tablinks[i].style.backgroundColor = "";


// Show the specific tab content
document.getElementById(pageName).style.display = "block";

// Add the specific color to the button used to open the tab content
elmnt.style.backgroundColor = color;


// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();

如果有任何提示或帮助，我将不胜感激！我已经坚持了很长时间，真的很想让我的菜单正常工作。我是 React 和 javascript 的新手，如果我犯了一个愚蠢的错误，请原谅！提前致谢！

【问题讨论】：

Cannot read property 'click' of null' - 这本身不是 React 错误，而是 JavaScript 错误。这意味着无论您尝试阅读的.click 是空的，我看到的唯一.click 出现在document.getElementById("defaultOpen") 之后，这反过来告诉我该元素不存在于您的页面上。也许这会有所帮助？

在 React 上，你必须使用 "onClick" 和 "Click" 上的大写才能使用 React。否则，它将是管理点击事件的浏览器而不是 React。

【参考方案1】：

首先，在反应中你不使用属性onclick=""。你应该使用onClick=。

那么，我认为您的问题与 react 的工作方式有关。 React 渲染到一个虚拟 DOM，在 react 完成对虚拟 DOM 进行更改后，它被渲染到实际 DOM。此外，渲染是异步完成的，因此使用document.getElementByID() 不会产生所需的结果。你应该改用 React Refs。看看这个 *** 问题：How to manually trigger click event in ReactJS?Here 也是文档页面

希望对你有帮助

【参考方案2】：

您可以解决的一种方法是添加一个 clickHandler 函数并在您的函数上添加一个导出。

functions.js

export const sampleFunction = () =>                                                                                                        
  console.log("Function clicked!!");
;

Component.js

  import React,  Component  from 'react';                                                                                                   
  import './App.css';

  import sampleFunction from './functions';

  class App extends Component 

    constructor(props)        
      super(props);            

      this.clickHandler = this.clickHandler.bind(this); 

    

    clickHandler()
      console.log("Checked stuff");   
      sampleFunction(); 
    

    render() 
      return (
        <div className="App">
          <button onClick=this.clickHandler>Function Working</button>
        </div>
      );
    
  

  export default App;