Форма ввода теряет фокус каждый раз, когда я набираю символ

Question

По какой-то причине моя форма ввода теряет фокус при каждом вводе символа. Я ввожу символ, и курсор исчезнет, ​​и мне придется снова щелкнуть форму и ввести другой символ. Моя цель - записать ввод пользователя для адреса электронной почты и пароля, который я выполнил, но единственная проблема заключается в том, что я ввел символ, щелкнул форму и снова ввел символ. Мне придется повторять это снова и снова, пока я не закончу вводить свои учетные данные. Может кто-нибудь помочь мне с этим вопросом?

---

import React, { Component } from 'react';
import { Navbar, Nav, Form, Col, Row, Button } from 'react-bootstrap';
import styled from 'styled-components';

class NavBarClass extends Component {
    constructor() {
        super()

        this.state = {
            email: "",
            password: ""
        }
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(event) {
        event.preventDefault();
        console.log(this.state);
    }
    handleEmailChange(event)   {
        this.setState({
            email: event.target.value
        })
    }

    handlePassChange(event)   {
        this.setState({
            password: event.target.value
        })
    }

    render() {
        const Styles = styled.div`
        .navbar {
            background-color: #222;
            }
        .navbar-brand, .navbar-nav .nav-link, .form-label {
            color: #C0C0C0;
        &:hover {
            color: white;
        }
    }
        .form-inline > * {
            margin:5px 3px;
    }
    `
        return (
            <Styles>
                <Navbar expand="lg">
                    <Navbar.Brand href="/">ABC Group</Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="ml-auto">
                            <Form inline onSubmit={this.handleSubmit}>
                                <Form.Group as={Row} controlId="formHorizontalEmail">
                                    <Form.Label column sm={1000} name="email" >Email:&nbsp;</Form.Label>
                                    <Col sm={15}>
                                        <Form.Control onChange={this.handleEmailChange.bind(this)} value={this.state.email} size="sm" type="email" placeholder="Enter your email" />
                                    </Col>
                                </Form.Group>
                                <Form.Group as={Row} controlId="formHorizontalPassword">
                                    <Form.Label column sm={1000}>Password:&nbsp;</Form.Label>
                                    <Col sm={15}>
                                        <Form.Control onChange={this.handlePassChange.bind(this)} value={this.state.password} size="sm" type="text" placeholder="Enter your password" />
                                    </Col>
                                </Form.Group>
                                <Button variant="primary" type="submit">Submit</Button>
                            </Form>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            </Styles>
        )
    }
}

export default NavBarClass;

Answer 1

Это довольно подозрительно:

render() {
    const Styles = styled.div`
    ...
    `

    return (
        <Styles>
            ...
        </Styles>
    )
}

styled создает правильные компоненты, поэтому определение нового компонента styled в каждом цикле рендеринга с последующим использованием его в качестве компонента верхнего уровня, вероятно,есть некоторые необычные эффекты.В этом случае я подозреваю, что все дочерние компоненты Styles перемонтируются при каждом рендеринге, что может привести к потере фокуса ваших полей.

Попробуйте вытащить определение для Styles за пределами рендеринга.функция (и желательно вне компонента целиком):

const Styles = styled.div`
    ...
`

class NavBarClass extends Component {
    ...
}

Answer 2

Попробуйте удалить стили из метода рендеринга, попробуйте использовать его вне класса. Каждый раз, когда вы печатаете, вы перерисовываете свой компонент, поэтому объявление стилей внутри функции рендеринга приводит к потере текущего фокуса.

const Styles = styled.div`
        .navbar {
            background-color: #222;
            }
        .navbar-brand, .navbar-nav .nav-link, .form-label {
            color: #C0C0C0;
        &:hover {
            color: white;
        }
    }
        .form-inline > * {
            margin:5px 3px;
    }
    `
    class NavBarClass extends Component {


        render() {
            const Styles = styled.div`
            .navbar {
                background-color: #222;
                }
            .navbar-brand, .navbar-nav .nav-link, .form-label {
                color: #C0C0C0;
            &:hover {
                color: white;
            }
        }
            .form-inline > * {
                margin:5px 3px;
        }
        `
            return (
                <Styles>
                    <Navbar expand="lg">
                        <Navbar.Brand href="/">ABC Group</Navbar.Brand>
                        <Navbar.Toggle aria-controls="basic-navbar-nav" />
                        <Navbar.Collapse id="basic-navbar-nav">
                            <Nav className="ml-auto">
                                <Form inline onSubmit={this.handleSubmit}>
                                    <Form.Group as={Row} controlId="formHorizontalEmail">
                                        <Form.Label column sm={1000} name="email" >Email:&nbsp;</Form.Label>
                                        <Col sm={15}>
                                            <Form.Control onChange={this.handleEmailChange.bind(this)} value={this.state.email} size="sm" type="email" placeholder="Enter your email" />
                                        </Col>
                                    </Form.Group>
                                    <Form.Group as={Row} controlId="formHorizontalPassword">
                                        <Form.Label column sm={1000}>Password:&nbsp;</Form.Label>
                                        <Col sm={15}>
                                            <Form.Control onChange={this.handlePassChange.bind(this)} value={this.state.password} size="sm" type="text" placeholder="Enter your password" />
                                        </Col>
                                    </Form.Group>
                                    <Button variant="primary" type="submit">Submit</Button>
                                </Form>
                            </Nav>
                        </Navbar.Collapse>
                    </Navbar>
                </Styles>
            )
        }
    }

    export default NavBarClass;