JIYIK CN >

Passing events and parameters to onClick in React:

1. Pass an inline function to the element's onClickattribute.
2. This function should get the event object and handleClickcall
3. Pass the event and arguments to handleClick.

const App = () => {
  const handleClick = (event, param) => {
    console.log(event);
    console.log(param);
  };

  return (
    <div>
      <button onClick={event => handleClick(event, 'jiyik.com')}>
        Click
      </button>
    </div>
  );
};

export default App;

We set the attribute on the button element onClickto an inline arrow function.

<button onClick={event => handleClick(event, 'jiyik.com')}>
  Click
</button>

The arrow function takes the event object and calls handleClickthe function, passing the event and arguments to it.

const handleClick = (event, param) => {
  console.log(event);
  console.log(param);
};

We can use this method to pass as many parameters as we want to our event handler function.

请注意, we are passing a function to onClickthe property, rather than the result of calling a function.

<button onClick={event => handleClick(event, 'jiyik.com')}>
  Click
</button>

If the function is called when passed to onClickthe prop, for example onClick={handleClick()}, it will be called immediately when the component mounts.

When a function is passed to onClickthe property, it will only be called when the event is triggered.

Event handling functions are always passed the event object as the first argument.

We can pass additional arguments to the function after the event object.

Use functions that return functions to pass parameters

We can also define a function that takes one or more arguments and returns a function that accepts an event object.

const App = () => {
  const handleClick = param => event => {
    console.log(event);
    console.log(param);
  };

  return (
    <div>
      <button onClick={handleClick('jiyik.com')}>
        Click
      </button>
    </div>
  );
};

export default App;

handleClickThe function takes an argument parameter and returns a function that takes an event parameter.

The result of calling handleClickthe function is another function that takes the event object as an argument.

<button onClick={handleClick('jiyik.com')}>
  Click
</button>

The onClick property is still set to a function, so everything works just like in the previous code example.

Use data attributes to pass events and parameters onClick

We can also set the attribute on the element data-*to pass parameters in the onClick event handler.

const App = () => {
  const handleClick = event => {
    console.log(event);

    const example =
      event.currentTarget.getAttribute('data-example');
    console.log(example);
  };

  return (
    <div>
      <button data-example="jiyik.com" onClick={handleClick}>
        Click
      </button>
    </div>
  );
};

export default App;

We set the data-sample property on the button element and getAttribute()access it using the method.

<button data-example="jiyik.com" onClick={handleClick}>
  Click
</button>

The property can be named anything, such as data-baror data-foo.

We can currentTargetaccess this element through the event object's property.

const handleClick = event => {
  console.log(event);

  const example =
    event.currentTarget.getAttribute('data-example');
  console.log(example); // 👉️ jiyik.com
};

The event's currentTargetproperty gives us access to the element to which the event listener is attached.

The target property of the event gives us a reference to the element (possibly a descendant) that triggered the event.

data-*We can set multiple attributes on an element and getAttribute()access them using the method.

Element.getAttributeThe method returns the value of a given attribute on an element.