OnFocus 和 onBlur 在没有聚焦或离开输入字段的情况下被触发 3 次

Question

我在这个组件中为我的输入字段创建了一个新组件我试图在输入字段获得焦点时给它一个 class 并在焦点丢失时将其删除。旁注形式是模态的（npm react-responsive-modal）。一旦加载了模态和输入组件，onFocus 和 onBlur 事件就会分别触发 3 次。

这里是 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;

父组件的render函数

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

当您设置 onFocus 和 onBlur 属性时，您实际上是在立即调用该函数。您需要删除函数名称后的()：

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

您看到这些函数被调用了三次，因为每次组件呈现时，它都会调用这些函数。

OnFocus 和 onBlur 在没有聚焦或离开输入字段的情况下被触发 3 次

OnFocus and onBlur get fired 3 Times without focusing or leaving input Field

javascript

forms

reactjs

events

onfocus