Event handling in react

Question

I am new to react and just started with event handling but while writing a simple onSubmit function I am getting the error (Cannot read property 'state' of undefined).

I know it can be corrected by

onSubmitFunct = event =>{}

but why doesn't

`onSubmitFunct (event) {}`

work?

I just invoked a function of a class app using .this then how is it undefined?

Why did I get undefined error when I am accessing the function of the same class using .this in the render function?

        import React from 'react';
        import ReactDom from 'react-dom';


        class APP extends React.Component {

          state = { term: '' };

          onSubmitFunct(event) {
            event.preventDefault();
            console.log(this.state.term);
          }

          render() {
            return (
              <div className="frm">
                <form onSubmit={this.onSubmitFunct}> //why this doen't work
                  <div className='infrm'>
                    <label>Enter Text </label>
                    <input type="text" value={this.state.term} onChange={e =>
                      this.setState({ term: e.target.value })} />
                  </div>
                </form>
              </div>
            );
          }

        }
        ReactDom.render(<APP />, document.querySelector('#root'));

Kishan Jaiswal · Answer 1 · 2019-11-01T12:22:07.240

0

 onSubmitFunct = (event) =>  {
  event.preventDefault();
  console.log(this.state.term);
  }

because in react this keyword is accessible by binding the created function in constructor or by using arrow Function,and the arrow function is giving that feature by default in reactjs

edited Nov 01 '19 at 12:22

answered Nov 01 '19 at 12:15

Kishan Jaiswal

644
3
14

Prakash Karena · Answer 2 · 2020-01-16T04:49:52.413

you need to add submit button for submit your form

import React from 'react';
import ReactDom from 'react-dom';

class APP extends React.Component{

state={
        term : ''
      }

onSubmitFunct = (event) => {
    event.preventDefault();
    console.log(this.state.term);
}
render(){
  return(
    <div className="frm">
      <form onSubmit={this.onSubmitFunct}> //why this doen't work
        <div className='infrm'>
        <label>Enter Text </label>
         <input type="text"
                value={this.state.term } 
                onChange={e => this.setState({term:e.target.value})} 
          />
           // add submit button for submitting form
           <button type="submit">
        </div>
        </form>
    </div>
  );
}

}

score -1 · Answer 3 · edited Dec 02 '19 at 09:21

You have to bind the method in constructor.

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

Your file should look like below.

class APP extends React.Component {
    constructor(props) {
        super(props);
        this.state = { term: '' };
        this.onSubmit = this.onSubmit.bind(this); // Bind method like this...
      }

    onSubmit(event) {
        event.preventDefault();
        console.log(this.state.term);
    }

    render() {
        return (
            <div className="frm">
                <form onSubmit={this.onSubmit}>
                    <div className='infrm'>
                        <label>Enter Text
         <input type="text" value={this.state.term} onChange={e =>
                                this.setState({ term: e.target.value })} />
                        </label>
                    </div>
                    <input type="submit" value="Submit" />
                </form>
            </div>
        );
    }

}

Event handling in react

3 Answers3