时间戳

首页 > 解决方案 > ReactJs - onClick 似乎不适用于按钮 HTML 标签

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

问题描述

我的 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 on success的结果）

谢谢你的帮助

Edit1：控制台和命题

安慰：

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

authentication:1 [DOM] 输入元素应具有自动完成属性（建议：“current-password”）：​</p>

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

标签： htmlreactjsonclick

解决方案

以下是如何在 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>
    );
  }
}

推荐阅读