首页 文章

在句柄更改时通过状态反应传递值

提问于
浏览
2

我试图使用两个方法,handleChange和handleSubmit作为反应中的登录页面 . 我试图在状态中为用户名和密码设置两个值,每当修改表单的输入时更新状态值,然后使用状态中存储的值提交 . 但是,我的值在打印到控制台时返回undefined . (p.s.我知道我还需要为所有安全专家加密密码) .

我是新手,所以我的逻辑可能存在问题:

Login.js

export default class Login extends React.Component {

constructor(props) {
    super(props);
    this.state = {uname: '', password: ''};

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

handleChange(event) {
    this.setState({uname: event.target.uname, password: event.target.password});
}

handleSubmit(event) {
    alert('A username and password  was submitted: ' + this.state.uname + this.state.password);
    event.preventDefault();

    fetch('https://localhost:8080/login', {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            uname: this.state.uname,
            password: this.state.password,
        })
    });
}

render() {

    return (
        <div>
            <Header titleName={"Login"}>
                <div className="container">
                    <div className="card"/>
                    <div className="card">
                        <h1 className="title">Login</h1>
                        <form onSubmit={this.handleSubmit}>
                            <div className="input-container">
                                <input name="uname" type="text" value={this.state.uname} id="#uname" required="required"
                                        onChange={this.handleChange}/>
                                <label form="#unamelabel">Username</label>
                                <div className="bar"/>
                            </div>
                            <div className="input-container">
                                <input name="password" type="password" value={this.state.password} id="#pass" required="required"
                                       onChange={this.handleChange}/>
                                <label form="#passlabel">Password</label>
                                <div className="bar"/>
                            </div>
                            <div className="button-container">
                                <button type="submit" value="Submit"><span>Go</span></button>
                            </div>
                            <div className="footer"><a href="#">Forgot your password?</a></div>
                        </form>
                    </div>
                </div>
            </Header>
            <Footer/>
        </div>
    );
}
}

4 回答

  • 2

    用此更换手柄更换

    handleInputChange(event) {
        const target = event.target;
        const value = target.value;
        const name = target.name;
    
        this.setState({
          [name]: value
        });
      }
    

    您需要将输入值设置为状态,而不是输入的名称

  • 1

    如果要获取反应statefull组件内输入的值,则应设置此输入的ref属性,如下所示:

    <input name="username" ref={node => this.username = node} />
    

    然后调用this.username将返回用户名输入的实际值 .

    您不希望在提交操作中设置状态,因为这会使您的组件每次都会在字母推送输入值时重新呈现 .

    更多react doc

  • 0

    问题在于handleChange函数 . 在上面发布的代码中,有两个不同的“事件”对象与两个表单输入相关联 . 他们每个人都有自己的一套属性 . 例如:'event.target.name'存储'input'标签指定的'name'属性,而'event.target.value'存储用户输入的数据 . 因此,将handleChange的实现更改为

    (A)详细

    handleChange(event) {
         if (event.target.name == "uname") {
                  this.setState({
                    uname: event.target.value
                  });
                }
          if (event.target.name == "password") {
                  this.setState({
                    password: event.target.value
                  });
                }
        }
    

    您可以将'name'属性与uname或password匹配,并相应地设置状态 .

    (B)简洁

    handleChange(event) {
        this.setState({
            [event.target.name]: event.target.value
        });
    }
    
  • 1

    我认为handleChange应该setState应该有event.tagert.name = event.target.value:

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

相关问题