Question

我在代码中的选择中有一个语言更改选项，但希望通过链接onClick事件来实现。 select->选项方法正在工作，但是我似乎无法通过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

Nav.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

因为您要传递一个显式值，所以这里不需要事件：

 public class Program
    {
        private static Logger _logger; // I noticed that you don't have to do
                                       // this in the ASP .NET samples as it's
                                       // taken care of "under the hood".
                                       // However, I couldn't see any
                                       // alternative in the standard
                                       // WinForms template in VS.

        private static void Main()
        {
            //Omitted some code about configuration files and WinForms initialization for brevity

            var services = new ServiceCollection();
            ServiceProvider = ConfigureServices(services);

            Application.Run(Form1);
        }

        public static IServiceProvider ServiceProvider { get; private set; }

        private static ServiceProvider ConfigureServices(IServiceCollection services)
        {
            services.AddLogging(loggingBuilder => loggingBuilder.AddSerilog(GetLogger(), true));
            GetLogger().Debug("Hello!!"); // Just testing... nothing happens. Where's my log file?
            //Omitted registration of various unrelated services for brevity

            return services.BuildServiceProvider();
        }


        private static Logger GetLogger()
        {
            if(_logger is null)
            {
                _logger = new LoggerConfiguration()
                .WriteTo.File(@"c:\BenjaminLog-.txt", rollingInterval: RollingInterval.Day)
                .CreateLogger();
            }

            return _logger;
        }
    }
}

Answer 2

在Javascript中，单击或其他Document事件后调用的回调绑定到该事件，而不绑定到定义它们的实际上下文。如果希望在事件后调用的函数中使用“ this”，则应执行以下操作将函数绑定到对象：

constructor(props){
    super(props);
    /*...*/
    this.closeNav = this.closeNave.bind(this);
}

Answer 3

好的。所以我不得不将onClick事件更改回：

<a className="language" style={{cursor: "pointer"}} value="en" role="button" id="en" onClick={() => this.onLangChange('en')}>EN</a>

这就是我所缺少的。谢谢MoséRaguzzini。

对e.target.value以外的内容进行onClick状态更改反应，而无需进行重新处理

3 个答案: