1. Use "data-*" to pass data to event listener
There are many times we need to pass parameters to the event listeners but may not want to use bind or arrow function to prevent frequent unnecessary re-rendering in React, in this case we can add "data-*" html attribute to accomplish.
e.g.:
<a href="#someLink" onCLick={onClickHandler}>
<span data-idx={valToOnclickListener}>someSpanText</span>
</a>
Then in "onClickHandler" function, we can use event object "e" to retrieve the data-idx parameter we would like to make use for further processing in this way.
const onClickHandler = (e) => {
const valToOnclickListener = e.target.dataset.idx;
// do anything here with valToOnclickListener
}
Sometimes the listener will capture the child element even though you actually put the "data-idx" attribute to the parent, in this case use e.currentTarget, the target capture must be the one which attaches the listener.
2. Specify child DOM using JSS
Use > to specify the child, use together with the class name, e.g.:
{ someClassName: {
'& > :first-child': {
borderLeft: '2px solid transparent',
}
}
}
References
沒有留言:
張貼留言