React.JS - я пытаюсь импортировать функции из файла .js в файл .jsx, но он все еще не работает. Невозможно прочитать свойство 'click' of 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 - это функция, которую я импортировал, но она не работает должным образом. Это дает мне ошибку 'Cannot read property' click 'of 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 и Javascript, так что извините, если я сделал глупую ошибку! Заранее спасибо!

Answer 1

Прежде всего, в реакции вы не используете атрибут onclick="". Вы должны использовать onClick={}.

Тогда, я думаю, ваша проблема связана с тем, как реагирует, работает. React рендерится в виртуальный DOM, и после того, как реакция завершена с внесением изменений в виртуальный DOM, он отображается в реальном DOM. Кроме того, рендеринг выполняется асинхронно, поэтому использование document.getElementByID() может не дать желаемого результата. Вместо этого вы должны использовать React Refs. Посмотрите на этот вопрос StackOverflow: Как вручную вызвать событие щелчка в ReactJS? Здесь также является страницей документации

Я надеюсь, что это помогло вам

Answer 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;