Состояние реакции не изменяется на входе

Question

Я пытаюсь создать простую форму входа в систему / регистрации, используя React, Typescript (мое первое использование) и AntDesign.Итак, вот мой компонент:

import React, { Component } from 'react'
import { Typography, Form, Input, Button } from 'antd';
const { Title } = Typography;


interface Props {
}

interface State {
    email: string,
    password: string
}

export class Login extends Component<Props, State> {
    constructor(props: Props) {
        super(props)
        this.state = { 
                        email: '',
                        password: ''
                    }
    }

    handleChange = (e:React.FormEvent<HTMLInputElement>):void => {
        e.preventDefault()
        const { name, value } = e.currentTarget;
        this.setState({ [name] : value } as Pick<State, keyof State> );
    }

    render() {
        return (
            <div>
                <Title level={2}>Log In</Title>
                <Form  className='login-form'>
                    <Form.Item>
                        <Input size='large' placeholder='E-mail used during registration' name='email' onChange={this.handleChange} />
                    </Form.Item>
                    <Form.Item>
                        <Input size='large' type='password' placeholder='Password' name='password' onChange={this.handleChange} />
                    </Form.Item>
                    <Form.Item>
                        <Button size='large' type='primary' block>
                            Log In
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        )
    }
}

Проблема в том, что вход не меняет состояние.В React Devtools состояние отображается без изменений, но появляется знак undo.

Answer 1

Я просто попытался вставить его в свой проект быстро.Попробуйте изменить свою структуру следующим образом:

    ....
    state: State = {
        email: '',
        password: ''
    }

    handleChange = (e: React.FormEvent<HTMLInputElement>): void => {
        e.preventDefault()
        const { name, value } = e.currentTarget;
        this.setState({ [name]: value } as Pick<State, keyof State>, () => console.log(this.state));
    }
    ....

По сути, я просто удалил конструктор, установил состояние напрямую и набрал его.Обратите внимание, что я использовал ловушку обратного вызова setState(), чтобы проверить, действительно ли состояние обновляется.

Визуализация:

И журнал консоли:

Answer 2

На самом деле, это работает.Должно быть что-то не так с Chrome Devtools.Я попытался console.log(this.state) onBlur, и это дает ожидаемые результаты.