OnFocus und onBlur werden 3 Mal ausgelöst, ohne zu fokussieren oder das Feld zu verlassen Feld

Question

Ich habe eine neue Komponente für mein Eingabefeld in dieser Komponente erstellt. Ich habe versucht, dem Eingabefeld eine Klasse zu geben, wenn es fokussiert ist hat verloren. Sidenote das Formular ist in einem Modal (npm reagieren-responsive-modal). Sobald die modale Komponente und die Eingabekomponente geladen sind, wird das Ereignis onFocus und onBlur jeweils 3 mal ausgelöst.

Hier ist die Komponente form.js

import React, { Component } from 'react'; 

class FormInput extends Component { 

    constructor(props) { 
     super(props); 

     this.state = { 
      selected: false, 
     }; 
    } 

    onFocus =() => { // -> Gets triggered 3 Times 
     //this.setState({ selected: true }); 
     console.log("Focus") 
    }; 

    onBlur =() => { // -> Gets triggered 3 Times 
     //this.setState({ selected: false }); 
     console.log("Leave") 
    }; 

    render() { 
     return (
      <div className="input" > 
       <input onFocus={this.onFocus()} onBlur={this.onBlur()} placeholder={this.props.placeholder} type={this.props.type} id={this.props.id} /> 
       <label className="input-label" htmlFor={this.props.id}>E-Mail</label> 
      </div> 
     ); 
    } 
} 

export default FormInput; 

Die Render-Funktion der übergeordneten Komponente.

render() { 
    return (
     <Modal open={this.state.open} onClose={this.onCloseModal} little> 
      <div className="App"> 
       {this.state.errors.map((error) => { 
        return <li key={error}>{error}</li> 
       })} 
       <form onSubmit={ this.onFormSubmit } autoComplete="off"> 
        <FormInput placeholder="E-Mail" type="text" id="email"/> 
        <input type="submit" /> 
       </form> 
       <button onClick={ this.logout }>Logout</button> 
      </div> 
     </Modal> 
    ); 
} 

Answer 1

Wenn Sie die onFocus und onBlur attribs einstellen, die Sie anrufen tatsächlich die Funktion sofort. Sie müssen die () nach dem Funktionsnamen entfernen:

<input onFocus={this.onFocus} onBlur={this.onBlur} placeholder={this.props.placeholder} type={this.props.type} id={this.props.id} /> 

Sie sehen die Funktionen dreimal genannt, weil jedes Mal, wenn die Komponente macht, wird es diese Funktionen aufrufen.