Why don’t I need to declare the parameter in the function?

Asked

Viewed 172 times

5

In the React documentation he brings an example of form, when the input receives some property value onChange is called with the function handleSubmit(event) in that way onChange={this.handleChange} because I don’t need to define the parameter in this case, since the function signature has a parameter? 

class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

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

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
javascript function react callback anonymous-function

2 answers

7


Because you’re not calling the function, you’re just saying which function will be used by framework at this time. This is what is called anonymous or technical function of callback, you are parameterizing what will run in determining time, in the specific case what will be called when the event occurs onChange, then who will call the real function is React and it will pass a argument for your job. So you’re passing a reference to the function and not calling it, the parentheses are just what differentiates it, with, flame, without, pass reference.

  • how does he know exactly which parameter is right? like how he knows he has to use Event or anything?

  • 1

    He doesn’t know exactly, this is not characteristic of JS or React. You have to do right what he expects, he does what he has to do and hopes that his part is ok, if it’s not going to be wrong. It’s a contract he makes with you and expects you to keep. Even in languages and technologies that guarantee this most, the guarantee goes up to a certain point, it is as you make a for in a whole array, if you do wrong will give compilation, or execution or logic error.

5

In JSX language it is written onChange={this.handleChange} but it’s actually the same as .addEventListener('change', this.handleChange) that is to say a callback. The moment that callback is used it will receive all arguments passed to it.

Example:

function handleChange(e){
    console.log(e.type, this.checked);
}

const checkbox = document.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', handleChange);
Clica aqui: <input type="checkbox" />

Note that in React classes you sometimes have to use .bind(this) to ensure that this callback will have the execution context you expect, namely the this is the class instance:

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

Browser other questions tagged javascript function react callback anonymous-function

You are not signed in. Login or sign up in order to post.