javascript - 每次输入字符时输入表单都会失去焦点

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

尝试从渲染方法中删除样式，在类之外尝试 每次键入时，您都会重新渲染组件，因此，在渲染函数中声明样式会使您失去当前焦点。

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;