Menu
const onClick = (e) => {
console.log(e.target);
}
const App = () => (
<button
name={'YES'}
className="btn waves-effect waves-light left blue darken-4"
onClick={onClick}
>
Yes
<i className='material-icons left'>done</i>
</button>
);
ReactDOM.render(<App />, document.querySelector("#app"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="app">I need e.target to be <button> in all possible cases, but when I click on <i>(or any other element as it seems), the target is <i> respectively. Its probably not error, but i don't know what to do about it.
623
When using React you should generally not need to call addEventListener to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered. When you define a component using an ES6 class, a common pattern is for an event handler to be a method on the class.
React events do not work exactly the same as native events. See the SyntheticEvent reference guide to learn more. When using React, you generally don’t need to call addEventListener to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.
Handling Events. Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences: React events are named using camelCase, rather than lowercase. With JSX you pass a function as the event handler, rather than a string.
The ChangeEvent type is imported from React and used against the event that is passed from the input element. Let’s look at a complete form and how to add type to the event handler for the input and also the form submission. React provides a FormEvent type you can use and that is passed to the handleSubmit function.
Use event.currentTarget, which will always be the element on which the handler was added. event.target will always be the element on which the event occurred.
<button
name={answerTypes.YES}
className="btn waves-effect waves-light left blue darken-4"
onClick={this.onClick}
>
Yes
<i className='material-icons left'>done</i>
</button>
onClick(e) {
console.log(e.currentTarget);
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
