注册页面的this.setState和this.state问题

Question

I have a code for Registration Page. Where I'm trying to send data to database by using this.setState and this.state but everytime I run the code Its showing some error in onSubmit Function about this.state . Why I'm getting this error please tell me. I've a project to submit and I'm stuck on this

import React, {Component} from 'react';
import {register} from './UserFunctions';

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

    this.onChange = this.onChange.bind(this)
    this.onChange = this.onChange.bind(this)
  }

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

  onSubmit(e){
    e.preventDefault()

    const user = {
        first_name: this.state.first_name, [error line]
        last_name: this.state.last_name,
        email: this.state.email,
        password: this.state.password
    }

    register(user).then(res => {
        if (res) {
            this.props.history.push('/login');
        }
    })
      }

 render() {
return (
    <div className="container">
        <div className="row">
            <div className="col-md-6 mt-5 mx-auto">
                <form noValidate onSubmit={this.onSubmit}>
                    <h1 className="h3 mb-3 font-weight-normal">Please Sign in!</h1>
                    <div className="form-group">
                        <label htmlFor="first_name">First Name</label>
                        <input type="text"
                        className="form-control"
                        name="first_name"
                        placeholder="First Name"
                        value={this.state.first_name}
                        onChange={this.onChange}
                        />
                    </div>
                    <div className="form-group">
                        <label htmlFor="last_name">Last Name</label>
                        <input type="text"
                        className="form-control"
                        name="last_name"
                        placeholder="Last Name"
                        value={this.state.last_name}
                        onChange={this.onChange}
                        />
                    </div>
                    <div className="form-group">
                        <label htmlFor="email">Email Address</label>
                        <input type="email"
                        className="form-control"
                        name="email"
                        placeholder="Enter Email"
                        value={this.state.email}
                        onChange={this.onChange}
                        />
                    </div>
                    <div className="form-group">
                        <label htmlFor="password">Password</label>
                        <input type="password"
                        className="form-control"
                        name="password"
                        placeholder="Enter Password"
                        value={this.state.password}
                        onChange={this.onChange}
                        />
                    </div>
                    <button type="submit"
                    className="btn btn-lg btn-primary btn-block">
                        Register
                    </button>
                </form>
            </div>
        </div>
    </div>
 )
 } 
 }

  export default Register

Please tell me what should I do to solve this problem.

Answer 1

You have to bind it like you did with onChange

this.onSubmit = this.onSubmit.bind(this)

You forgot to do it probably, when copying onChange.