Passing Arguments to Event Handlers using data-*

Currently the documentation https://reactjs.org/docs/handling-events.html mentions two ways how to handle events when the event handler function needs a parameter:

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

As far as I understand, both variants create a new function on each render, which might lead to performance issues because of unnecessary re-renders (you might have to implement custom logic in shouldComponentUpdate). In the documentation:

We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.

Not mentioned is using a "data'*" HTML attribute and then use that event property in the handler.
I would like to document this variant – or if it is not recommended, document that (and why) this is not recommended.

See also https://github.com/facebook/react/issues/1259

If you consider this worth documenting I will create a PR.

Bắt đầu với trang tài liệu handling-events và xem xét hai mẫu hiện có để truyền đối số cho các trình xử lý sự kiện, sau đó cân nhắc cách tiếp cận data-* được đề xuất cùng với issue React được liên kết. Công việc được coi là hoàn tất khi trang này nêu rõ việc khuyến nghị hoặc từ chối biến thể này và giải thích lý do.