ReactJs - похоже, что onClick не работает с HTML-тегом кнопки

Question

В моем приложении ReactJs есть простой фрагмент кода:

import React from 'react'

import '../../../assets/styles/authentication/login.css'
import '../../../assets/bootstrap/css/bootstrap.min.css'

import { login } from './login_form_actions.js'

export default class LoginForm extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            email : { email: "" },
            password : { password: "" }
        }
        this.handle_sign_in_click = this.handle_sign_in_click.bind(this)
    }

    handle_sign_in_click(e) {
        console.log(e, this.state.email, this.state.password)
        login(this.state.email, this.state.password)
    }

    render() {
        return (
                <div className="col-sm-6 col-sm-offset-3 form-box">
                    <div className="form-auth">
                        <form className="login-form">
                            <div className="form-group">
                                <label className="sr-only" htmlFor="form-username">Email</label>
                                <input type="text" name="form-username" placeholder="Email..."
                                       className="form-username form-control" id="form-username"
                                       onChange={(event) => this.setState({email:event.target.value})}/>
                            </div>
                            <div className="form-group">
                                <label className="sr-only" htmlFor="form-password">Password</label>
                                <input type="password" name="form-password" placeholder="Password..."
                                       className="form-password form-control" id="form-password"
                                       onChange={(event) => this.setState({password:event.target.value})}/>
                            </div>
                            <button className="btn" onClick={this.handle_sign_in_click}>Sign in!</button>
                        </form>
                    </div>
                </div>
        )
    }
}

Когда я нажимаю кнопку Sign In, по какой-то причине ничего не происходит.

Я пытался связать handle_sign_in_click как предложено в каком-то другом вопросе о ответах (из StackOverflow), но все равно ничего ... Чего мне здесь не хватает?(следующий шаг - использовать приставку для сохранения результата аутентификации при успешном завершении)

Спасибо за любую помощь

Edit1: Консоль и предложение

консоль:

react-dom.development.js: 22287 Загрузите React DevTools для более удобной работы при разработке :act-devtools

аутентификация: 1 [DOM] Входные элементы должны иметь атрибуты автозаполнения (рекомендуется: «текущий»)-password "):

Однако, когда я использую <a/> вместо <button/>, он работает, но мой дизайн не работает (он такой же, как и при нажатии кнопки)

Answer 1

В вашем обработчике входа отсутствует e.preventDefault, проверьте это sample

Answer 2

Вот как правильно обрабатывать базовые формы в React (без библиотек, таких как Formik и т. Д.):

import React from 'react';

export default class Form extends React.Component {
  state = { email: '', password: '' };

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

  handleSubmit = event => {
    event.preventDefault();
    // login logic here ususally passed down as props from the parent (if not using redux...) so it will be something like this.props.login(...)
    this.setState({ email: '', password: '' });
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          name="email"
          type="text"
          onChange={this.handleChange}
          placeholder="email"
          value={this.state.email}
        />
        <input
          name="password"
          type="text"
          onChange={this.handleChange}
          placeholder="password"
          value={this.state.password}
        />
        <input type="submit" />
      </form>
    );
  }
}