javascript - 在没有 redux 的情况下对 e.target.value 以外的其他内容使用react onClick 状态更改

Question

我在代码中选择了一个语言更改选项，但希望通过链接 onClick 事件来实现。 select-> option 方法正在工作，但我似乎无法通过 onClick 使其工作。我确信我的代码中遗漏了一些东西，但似乎无法弄清楚。单击“en”时，我需要英语，单击“es”时，我需要西类牙语，可以访问各个语言文件。这是代码:

App.js

import React, { Component } from 'react';
import './App.css';
import { HashRouter as Router, Route } from 'react-router-dom';



import Home from './pages/Home';
import Portfolio from './pages/Portfolio';
import Work from './pages/Work';
import Servicios from './pages/Servicios';
import Contacto from './pages/Contacto';
import Team from './pages/Team';
import Aviso from './pages/Aviso';


class App extends Component {
  render() {
    const { lang } = this.props;
    return (
      <Router basename="/"> 
        <div>
        <Route exact path='/' component={Home} />
        <Route exact path='/Portfolio' component={Portfolio} />
        <Route exact path='/Work' component={Work} />
        <Route exact path='/Servicios' component={Servicios} />
        <Route exact path='/Contacto' component={Contacto} />
        <Route exact path='/Team' component={Team} />
        <Route exact path='/Aviso' component={Aviso} />
        </div>
      </Router>
    );
  }
}



export default App;

en.js

export default {
    slogan: 'Message A'
}

es.js

export default {
    slogan: 'Mensaje A'
}

Main.js

import React, { Component } from 'react';
import '../App.css';
import LogoImage from '../assets/img/LogoRRspark-Trans.png';
import counterpart from 'counterpart';
import Translate from 'react-translate-component';
import en from '../lang/en';
import es from '../lang/es';


counterpart.registerTranslations('en', en);
counterpart.registerTranslations('es', es);
counterpart.setLocale('es');


class Main extends Component {
    render() {
        return(
            <div className="main-grid-container">
            <div className="item1">
            <div className="item-wrapper">
            <div className="image-holder">
                <img className="logo-image" src={LogoImage} alt="Logo" />
                <Translate content="slogan" component="h1" className="uppercase" />
            </div>
            </div>
            </div>
            <div className="item2">
                <div className="item-wrapper-2">
                    <h3 className="promo-header">Your web and app<br /> heavy lifters</h3>
                    <div className="center-obj">
                        <a href="/Work" className="button-box button-text-1">Check out how we work</a>
                    </div>
                </div>
            </div>
            <div className="item3">
                <div className="item-wrapper-3">
                    <div id="show-hide">
                    <div id="outer" className="outer">
                        <h1 className="services">SERVICIOS</h1>
                    </div>
                    <div id="inner">    
                    <div className="services-menu">
                        <ul className="list-items">
                            <li className="service-links">
                                <a href="http://rrspark.com" style={{position: 'relative', zIndex: 50}}>Sitio Web</a>
                            </li>
                            <li className="service-links">
                                <a href="http://rrspark.com" style={{position: 'relative',zIndex: 50}}>E-Commerce</a>
                            </li>
                            <li className="service-links">
                                <a href="http://rrspark.com">Contenido Web</a>
                            </li>
                        </ul>
                    </div>
                    </div>
                </div>
                </div>
            </div>
            <div className="item4">
                <div className="container">
                    <div className="row">
                        <div className="col standard-info">
                            <p className="footer-text">info@rrspark.com</p>
                            <p className="footer-text">MX (55) 5762 7080</p>
                            <p className="footer-text">USA (206) 905 9934</p>
                        </div>
                        <div className="col">
                            <div className="room-to-breathe">
                                <div className="social">
                                <a href="/Contacto" className="footer-contact-button">CONTACTO</a>
                            </div>
                                <a href="#"><i className="fab fa-linkedin-in"></i></a>        
                                <a href="#"><i className="fab fa-instagram"></i></a>
                                <a href="#"><i className="fab fa-facebook-f extra-padding-right"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        );
    }
}

export default Main

导航.js

import React, { Component } from 'react';
import '../App.css';
import { NavLink } from 'react-router-dom';
import counterpart from 'counterpart';
import Translate from 'react-translate-component';
import en from '../lang/en';
import es from '../lang/es';

counterpart.registerTranslations('en', en);
counterpart.registerTranslations('es', es);
counterpart.setLocale('es');


class Nav extends Component {
     openNav() {
       document.getElementById("mySidenav").style.width = "360px";
    }
     closeNav() {
       document.getElementById("mySidenav").style.width = "0";
    }

    state = {
        lang: 'es'
    }

    onLangChange = (e) => {
        this.setState({lang: e.target.value});
        counterpart.setLocale(e.target.value);
    }

    render() {
        const { lang } = this.props;
        return (
                <div id="mySidenav" className="sidenav">
                    <div className="menu-wrapper">
                        <a href="javascript:void(0)" className="closebtn" style={{cursor: "pointer"}} onClick={() => this.closeNav()}>&times;</a>
                        <NavLink exact to="/" activeClassName="active a-link">- <span className="big-cap">I</span>NICIO</NavLink>
                        <NavLink exact to="/Portfolio" activeClassName="active a-link">- <span className="big-cap">P</span>ORTFOLIO</NavLink>
                        <NavLink exact to="/Work" activeClassName="active a-link">- <span className="big-cap">H</span>OW <span className="big-cap">W</span>E <span className="big-cap">W</span>ORK</NavLink>
                        <NavLink exact to="/Servicios" activeClassName="active a-link">- <span className="big-cap">S</span>ERVICIOS</NavLink>
                        <NavLink exact to="/Contacto" activeClassName="active a-link">- <span className="big-cap">C</span>ONTACTO</NavLink>
                    </div>
                    <div className="sidebar-content">
                        <p>Suspendisse et magna eget diam ultrices elementum. Duis molestie suscipit dui, eu finibus lorem gravida sed. Vestibulum nec diam non nisl aliquet auctor in at nulla. Sed at gravida nisi, eu semper magna. Phasellus quam nisi, vestibulum a iaculis nec, molestie ut quam. Fusce lacus metus, viverra vitae hendrerit in, ultrices ac nibh. 
                        <br />Cras interdum magna et sem fermentum efficitur. Quisque vitae accumsan sapien. Donec et magna at risus tristique facilisis. Proin ornare diam et urna imperdiet eleifend.</p>
                    </div>
                    <div className="sidebar-content">
                        <div className="wrapper">
                            <NavLink exact to="/Team" activeClassName="active" className="team-button a-link-2">Nuestro equipo base</NavLink><br />
                                <NavLink exact to="/Aviso" activeClassName="active" className="aviso a-link-2">Aviso de Privacidad</NavLink>
                                <p className="copy">&copy;2019 RRspark</p>
                        </div>
                    </div>
                    <div className="colored-side">
                        <div className="link-holder">
                            <a className="language" style={{cursor: "pointer"}} value={this.state.lang} role="button" id="en" onClick={this.onLangChange}>EN</a>
                            <a className="language" style={{cursor: "pointer"}} value={this.state.lang} role="button" id="es" onClick={() => this.onLangChange('es')}>ES</a>
                            <select value={this.state.lang} onChange={this.onLangChange}>
                                <option value="en">EN</option>
                                <option value="es">ES</option>
                            </select>
                        </div>
                        <span className="button-area" style={{cursor: "pointer"}} onClick={() => this.openNav()}>&#43;</span>
                        <h3 className="colored-side-slogan">RRspark Stellar Web Studio</h3>
                    </div>
                </div>
        );
    }
}



export default Nav

Answer 1

因为您传递的是显式值，所以此处不需要事件:

onLangChange = (lang) => {
        this.setState({ lang });
        counterpart.setLocale(lang);
    }