代码之家  ›  专栏  ›  技术社区  ›  Karlom

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

  •  0
  • Karlom  · 技术社区  · 7 年前

    我是一个很新的反应者,根据一个教程,我制作了这个注册表(我刚用Materialize更改了引导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;
    

    问题是我不能在表单中输入任何内容,并且在控制台中也没有得到任何错误。所以就提前准备好了。感谢你的提示。

    1 回复  |  直到 7 年前
        1
  •  1
  •   Ali Torki    7 年前

    正如你所写:

    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}
     />
    

    -密码输入

    <输入
    name=“电子邮件”
    id=“电子邮件”
    type=“电子邮件”
    value=this.state.email_
    onchange=this.handlechange_
    /gt;
    

    我希望它能帮助你,让你享受反应的乐趣。