Question

您好，当我单击它时，我有两个输入并尝试写一些没有出现的内容而且他不允许写我不知道为什么

代码：

   import React, { Component } from 'react';

class LoginForm extends Component {
    constructor(props){
        super(props);
        this.state = {
            login:'',
            password:'',
        };
        this.onSubmit = this.onSubmit.bind(this);
        this.onChange = this.onSubmit.bind(this);
    }
    onSubmit(e){
        e.preventDefault();
    }
    onChange(e){
        this.state({[e.target.name]: e.target.value});
    }

  render() {
    const { errors, login, password, isLoading } = this.state;
    return (
        <form onSubmit={() => this.onSubmit}>
            <label for="login">Login</label>
            <input type="text" id="login" value={login}  onChange={(e) => this.onChange(e)} placeholder="Informe seu login" />
            <label for="password">Senha</label>
            <input type="password" id="password" value={password} onChange={(e) => this.onChange(e)}   placeholder="Informe sua senha"/>
        <button className="btnEnt" type="submit">Entrar</button>
    </form>
    )
  }
}

export default LoginForm;

在任何一个输入中我都无法输入任何内容我不知道哪里出了问题。

Answer 1

您没有将任何参数传递给处理程序。同样，您缺少每个输入的属性name，这对于访问更改处理程序中的event.target.name至关重要。将其更改为以下内容以隐式传递事件对象：

<input type="text" name=“login” id="login" value={login}  onChange={this.onChange} placeholder="Informe seu login" />
// ...
<input type="password" name=“password” id="password" value={password} onChange={this.onChange}   placeholder="Informe sua senha"/>

或将其更改为以下内容，以将事件参数实际传递给处理程序：

<input type="text" id="login" name=“login” value={login}  onChange={(e) => this.onChange(e)} placeholder="Informe seu login" />
// ...
<input type="password" id="password" name=“password” value={password} onChange={(e) => this.onChange(e)}   placeholder="Informe sua senha"/>

另一个问题是您正在尝试执行this.state而不是this.setState，请将其更改为以下内容：

this.setState({[e.target.name]: e.target.value});

这里是example的动作。

希望有帮助！

Answer 2

在这里，我将向您简要说明。

为您分配了空值作为输入值。登录状态为空，您分配了该权限！

将值删除到输入中。

<input type="text" name="login" onChange={this.handleChange.bind(this)} placeholder="Eg: xyz" required />

<input type="text" name="password" onChange={this.handleChange.bind(this)} placeholder="Eg: xyz" required />

添加句柄更改功能：

 handleChange(e) {
    let change = {}
    change[e.target.name] = e.target.value
    this.setState(change)
  }

上面的handlechange函数自动为状态分配值。

如果您要提交数据：

onSubmit(){
 axios.post("www.yourURL.com", this.state).then(res=>{
 console.log(res
})

就是这样。快乐的编码...

反应js输入不允许编写

2 个答案: