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

React passing value through state on handle change

提问by Joss MT

I am attempting to use two methods, handleChange and handleSubmit for a login page in react. I have tried to set two values for username and password within state, update the values in state whenever the input are of the form is modified, then submit using the values stored in state. However, my values return undefined when printed to console. (p.s. I am aware I still yet need to encrypt password for all you security gurus).

我正在尝试使用两种方法，handleChange 和 handleSubmit 用于反应中的登录页面。我试图在 state 中为 username 和 password 设置两个值，每当表单的输入被修改时更新 state 中的值，然后使用存储在 state 中的值提交。但是，我的值在打印到控制台时返回 undefined。（ps 我知道我仍然需要为所有安全专家加密密码）。

I'm new to react so there may be an issue with my logic:

我是新手，所以我的逻辑可能有问题：

Login.js

登录.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>
    );
}
}

采纳答案by Gautam Naik

Replace handle change with this

用这个替换手柄更改

handleInputChange(event) {
    const target = event.target;
    const value = target.value;
    const name = target.name;

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

You need to set value of the inputs to the state, not the name of the inputs

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

回答by Simon Mulquin

If you want to get the value of an input inside a react statefull component, you should set the ref property of this input like this:

如果你想在 react statefull 组件中获取输入的值，你应该像这样设置这个输入的 ref 属性：

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

then calling this.username will return you the actual value of username input.

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

You don't want to set the state in a submit action since this makes your component rerender each times a letter push your input value.

您不想在提交操作中设置状态，因为这会使您的组件每次都会重新呈现一个字母推送您的输入值。

More in the react doc

反应文档中的更多内容

回答by Aditya

The problem lies with handleChange function. In the code posted above, there are two distinct 'event' objects associated with the two form inputs. Each one of them have their own set of properties. For example: 'event.target.name' stores the 'name' attribute specified by 'input' tag while 'event.target.value' stores the data entered by the user. So, change the implementation of handleChange to either

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

(A) Verbose

(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
              });
            }
    }

where you can match the 'name' attribute to either uname or password and set state accordingly.

您可以在其中将“名称”属性与 uname 或密码相匹配，并相应地设置状态。

(B) Succinct

(B) 简洁

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

回答by Pankti Parikh

I think the handleChange should setState should have event.tagert.name = event.target.value:

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

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