Question

我是一个非常新的反应者，并按照一个教程制作了此注册表单（我只是使用Materialize更改了Bootstrap html）

import React, {Component} from 'react';

class Register extends Component {
    constructor() {
        super();
        this.state = {          
            email: '',
            password: '',
            errors: {}
        };

          this.handleChange = this.handleChange.bind(this);
    }

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

    render() {
        return (

        <div>
          <div className="row">
            <div className="col s10 m6 offset-s1 offset-m3 ">

                <form className="col s12 myform">
                <h3 className="center"Register </h3>
                        <div className="row">
                          <div className="input-field col s12">
                            <input 
                                id="email" 
                                type="email" 
                                value={this.state.email} 
                                onChange = {this.handleChange}
                                />
                            <label htmlFor="email">Email</label>
                          </div>
                        </div>

                       <div className="row">
                          <div className="input-field col s12">
                            <input 
                                id="password" 
                                type="password" 
                                value={this.state.password} 
                                onChange = {this.handleChange}  
                                />
                            <label htmlFor="password">Password</label>
                          </div>
                        </div>

                        <button className="btn mybtn waves-effect waves-light right" type="submit" name="action">Submit
                                <i className="mdi-content-send right"></i>
                              </button>
              </form>
            </div>  
          </div>    
        </div>



            );
    }
}

export default Register;

问题是我无法在表单中输入任何内容，并且在控制台中没有出现任何错误。所以真的很困惑。感谢您的提示。

Answer 1

如您所写：

handleChange (e) {
    this.setState({
       [e.target.name] : e.target.value // This line I mean.
    });
  }

因此，您只需要为输入标签分配名称属性，因为您已经编写了e.target.name，并且您的输入名称在该状态下可用，但在输入属性中不可用。

这样做吧：
-电子邮件输入

<input 
    name="email"
    id="email" 
    type="email" 
    value={this.state.email} 
    onChange = {this.handleChange}
 />

-密码输入

<input 
    name="email"
    id="email" 
    type="email" 
    value={this.state.email} 
    onChange = {this.handleChange}
 />

希望它能对您有所帮助，并乐于回应

在React Form组件中输入文本不允许输入文本

1 个答案: