Edit1：控制台和命题

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按钮时，由于某种原因没有任何反应。

我尝试按照其他其他reactjs问题（来自StackOverflow）的建议绑定 handle_sign_in_click ，但是仍然没有。（下一步是使用redux成功存储auth的结果）

感谢您的帮助

Edit1：控制台和命题

控制台：

react-dom.development.js：22287下载React DevTools以获得更好的开发体验：react-devtools

身份验证：1 [DOM]输入元素应具有自动完成属性（建议：“当前密码”）：

但是，当我使用<a/>而不是<button/>时，它确实可以工作，但是我的设计却被破坏了（与按钮时完全一样）

Answer 1

这里是如何正确处理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>
    );
  }
}

Answer 2

您在登录处理程序中缺少e.preventDefault，请检查此工作sample

ReactJs-onClick似乎不适用于按钮HTML标记

Edit1：控制台和命题

2 个答案: