react.js 中的 onChange

Question

I am new to react.js. I am little bit confused about onChange event in react.js. Why we are not using brackets while handling the event through onChange event?

<input 
  type="text"
  onChange={this.handleChange()}
/>

Normally when we handle the event through JavaScript we would write like this

<input type="text" onclick="handleChange()"/>

Answer 1

If you mean why we need to do onChange={this.handleChange} instead of onChange={this.handleChange()} - the first one makes gives a reference of handleChange to the onChange. The second one immediately (as it is interpreted) runs the handleChange function and the return value of that is saved as a referece for the onChange.

Think about it like this

onClick={alert(123)} // this runs alert immediately
onClick={() => alert(1)} // makes a new function will run when clicked
onClick={alert} // this runs alert when clicked

If you need the event object of in your event handler, think about where you would get that from; you need to get it as a function parameter and for that you need a new function or reference:

onClick={console.log} // logs the event object
onClick={(event) => console.log(event)} // also logs the event
onClick={console.log(event)} // runs immediately, event doesn't exist then

When you have an inline event handler like onclick="handleChange()" your browser actually evaluates the string "handleChange()" as you press. Like with the eval() function. Try doing eval("alert()") in dev tools and do note that there "alert()" is a string

PS. Welcome to SO: Please check the formatting of your question next time :)