如何將 js 文件導入 React js 文件

Question

JavaScript 文件。

const signUpButton = document.getElementById('signUp');
const signInButton = document.getElementById('signIn');
const container = document.getElementById('container');

signUpButton.addEventListener('click', () => {
    container.classList.add("right-panel-active");
});

signInButton.addEventListener('click', () => {
    container.classList.remove("right-panel-active");
});

我有這個 javascript 代碼，我想在我的 React 文件中使用它。 這是我的 React js 文件代碼。

import React, { Component } from 'react'
// import './js/main'

class Login extends Component {
    render() {
        return (
            <div>
                <div class="container" id="container">
    <div class="form-container sign-up-container">
        <form action="#">
            <h1>Create Account</h1>
            <div class="social-container">
                <a href="#" class="social"><i class="fa fa-facebook-f" style={{color: 'blue'}} aria-hidden="true"></i></a>
                <a href="#" class="social"><i class="fa fa-google-plus" style={{color: 'red'}} aria-hidden="true"></i></a>
                <a href="#" class="social"><i class="fa fa-linkedin" style={{color: 'blue'}} aria-hidden="true"></i></a>
            </div>
            <span>or use your email for registration</span>
            <input type="text" placeholder="Name" />
            <input type="email" placeholder="Email" />
            <input type="password" placeholder="Password" />
            <button>Sign Up</button>
        </form>
    </div>
    <div class="form-container sign-in-container">
        <form action="#">
            <h1>Sign in</h1>
            <div class="social-container">
            <a href="#" class="social"><i class="fa fa-facebook-f" style={{color: 'blue'}} aria-hidden="true"></i></a>
                <a href="#" class="social"><i class="fa fa-google-plus" style={{color: 'red'}} aria-hidden="true"></i></a>
                <a href="#" class="social"><i class="fa fa-linkedin" style={{color: 'blue'}} aria-hidden="true"></i></a>
            </div>
            <span>or use your account</span>
            <input type="email" placeholder="Email" />
            <input type="password" placeholder="Password" />
            <a href="#">Forgot your password?</a>
            <button>Sign In</button>
        </form>
    </div>
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>Welcome Back!</h1>
                <p>To keep connected with us please login with your personal info</p>
                <button class="ghost" id="signIn">Sign In</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>Hello, Friend!</h1>
                <p>Enter your personal details and start journey with us</p>
                <button class="ghost" id="signUp">Sign Up</button>
            </div>
        </div>
    </div>
</div>
</div>
        )
    }
}

export default Login

在此代碼中，有用於滾動登錄表單並獲取注冊頁面的 onclick 事件。 如何使用 Javascript 執行點擊事件。 我是 React 的新手。 幫助我擺脫困境。

Answer 1

您應該執行以下操作

1. 為signUpButton.js和signInButton.js分別創建兩個單獨的組件。 這些組件也應該包括它們各自的事件處理程序
2. 將這兩個組件導入您的主組件（您的主 React.js 文件）並使用它們。

從 './signUpButton.js' 導入 { SignUpButton }

從 './signUpButton.js' 導入 { SignInButton }

現在，在您的 JavaScript 文件中，您正嘗試使用document.getElementById直接訪問 DOM 元素。 在 React 中不建議這樣做

重要的是您通過這里的核心反應概念並徹底理解這些概念。 從長遠來看，這肯定會對您有所幫助

React 中的事件處理https://reactjs.org/docs/glossary.html#events

Answer 2

class Login extends Component {
        constructor(props) {
        super(props);
        this.state = {addClass: false}
      }
      toggle() {
        this.setState({addClass: !this.state.addClass});
      }
    render() {
        let Class = ['container'];
    if(this.state.addClass) {
      Class.push('right-panel-active');
    }
        return (
            <div>
                <div className={Class.join(' ')} id="container">

這對我來說做得很好。 按預期工作。

<button className="ghost" id="signIn" onClick={this.toggle.bind(this)}>{this.state.addClass}Log In</button>

並在按鈕單擊時調用它。 在進行研究后解決了這個問題。 作為新的 React js 開發新手感到非常高興。