React.JS-我正在嘗試將功能從.js文件導入.jsx文件，但仍然無法正常工作。 無法讀取null的屬性“點擊”

Question

我是React的新手，已經設置了我的應用程序。 到目前為止，我正在嘗試創建一個包含菜單的標題，並覆蓋整個網站。 經過大量研究，我成功地做到了這一點。 現在，我正在嘗試做一個更復雜的菜單-帶有懸停等。目前，我唯一不能做的就是單擊它們時不能使這些類處於活動狀態-我有代碼，但是我沒有不知道如何正確整合它。

我已經研究過StackOverflow，了解如何導入函數，並嘗試了它，但無濟於事。 這是我所有的代碼和錯誤：

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'為null” > 23 | document.getElementById("defaultOpen").click();

這是.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和Java語言的新手，如果我犯了一個愚蠢的錯誤，請原諒！ 提前致謝！

Answer 1

解決方法之一是添加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;

Answer 2

首先，在反應中，不要使用onclick=""屬性。 您應該使用onClick={} 。

然后，我認為您的問題與反應的方式有關。 React渲染到虛擬DOM，並在完成對虛擬DOM的更改后將其渲染到實際DOM。 而且，渲染是異步完成的，因此使用document.getElementByID()不會產生所需的結果。 您應該改為使用React Refs。 看看這個StackOverflow問題： 如何在ReactJS中手動觸發點擊事件？ 這也是文檔頁面

希望對您有幫助