javascript - React passing value through state on handle change - Stack Overflow

admin管理员组

文章数量:1289542

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).

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

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

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).

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

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

• javascript
• reactjs
• react-native
• react-router
• reactive-programming

Share Improve this question Follow asked May 31, 2018 at 18:44 Joss MTJoss MT 29911 gold badge66 silver badges1717 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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

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

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

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

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

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

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

More in the react doc

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

(A) Verbose

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.

(B) Succinct

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

本文标签： javascriptReact passing value through state on handle changeStack Overflow