This question already has answers here:
Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?
(4 answers)
Closed 2 years ago.
I never understood how that this works if it ever works
in my react I wrote <input onChange={()=>console.log(this.value)} /> Why doesn't it recognize this??? it tells me that it Cannot read property 'value' of undefined
onChange anyone help please :/
React doesn't bind the event listener with the element.
So, the this refers to the class Component in which its defined.
If it was in functional Component then this it undefined
So if your trying to read input elements value use this,
<input onChange={e => console.log(e.target.value)} />
Read More,
Function And Class Components
Related
This question already has answers here:
React Native property values in quotes vs braces
(1 answer)
What do curly braces mean in JSX (React)?
(4 answers)
Closed 8 months ago.
<button className='btn' onClick={() => setValue(value - 1)}>
<form className='form' onSubmit={handleSubmit}>
I hope I don't get people riled up asking this. I tried to google and cannot find the answer. Why for some attributes in HTML uses 'xxx', eg classname='btn' and why some attributes uses {}, eg onSubmit={xxx}.
In the above case, the handleSubmit is a externally define function. Does {} imply a variable, that's all ? But I also saw some codes similar to this onSubmit={() => xxxx} which is an inline function and not an external variable.
Currently, I just memorise it as it come. Thanks very much !
This question already has answers here:
commandButton/commandLink/ajax action/listener method not invoked or input value not set/updated
(12 answers)
Form submit in conditionally rendered component is not processed
(1 answer)
Closed 11 months ago.
I am facing an issue with primefaces(version 8.0) commandButton like, whenever I'm using rendered attribute to satisfy some condition, the method inside actionListener is not firing. But if I don't use the rendered attribute, it is normally invoking the method. I wonder why it's behaving in this way and how can I resolve this.
The commandButton is as,
<p:commandButton value="Display" actionListener="#{dispManagedBean.display}" process="#this"
update="growlMessage" icon="ui-icon-circle-arrow-e" rendered="#{demoManagedBean.isDisplay}" >
<f:attribute name="dispId" value="#{demoManagedBean.dispId}" />
</p:commandButton>
This is not calling dispManagedBean.display method anyway. But if I remove the rendered="#{demoManagedBean.isDisplay}" , then it is hitting the method normally.
Again, I tried with disabled="#{not demoManagedBean.isDisplay}" condition, and again it is not working there too.
I tried with <c:if test=""></c:if> jstl condition, it is not invoking there also.
But I must use that condition, it is the business logic. I cant omit that. How can I achieve this?
This question already has answers here:
Access CSS variable from javascript [duplicate]
(2 answers)
Closed 2 years ago.
I have defined some styles in the :root and global namespace. But when I try to access them programmatically I am getting an error:
TypeError: Window.getComputedStyle: Argument 1 does not implement interface Element.
Here is my style rule:
:root {
--my-css-variable: green;
}
Here is what I have tried:
var variable = "--my-css-variable";
// all of the following error
window.getComputedStyle(window).getPropertyValue(variable);
window.getComputedStyle(window.document).getPropertyValue(variable);
window.getComputedStyle(window.document.body).getPropertyValue(variable);
When I select an element on the page and look in debug tools it says element is inheriting from HTML:
You could try:
getComputedStyle(document.documentElement)
.getPropertyValue('--my-css-variable');
This question already has answers here:
Button that refreshes the page on click
(18 answers)
Closed 3 years ago.
I want to refresh my website after clicking on a specific area (container)
Any ideas?
THANKS!
You can use Location.reload() API interface (https://developer.mozilla.org/ru/docs/Web/API/Location/reload)
So the answer could look as follows:
document.querySelector('you-area-selector-here').addEventListener((click) => {
window.location.reload(true);
})
true flag is required to be sure the page was reloaded from server, not from cache.
It is not a good practice to mix js with HTML.
I would do it this way:
let refreshPage = document.querySelector('#div1').addEventListener('click', => {
location.reload();
})
note: you must give id or class to the element you are trying to select in this function.
There are other way of doing it i.e = document.querySelectorAll, getElementById, getElementByClassName, getElementByTagName.
This question already has answers here:
Understanding PrimeFaces process/update and JSF f:ajax execute/render attributes
(5 answers)
Closed 7 years ago.
What is the default value of process attribute on commandButton or commandLink components? I mean if I specify only partialSubmit="true" but do not write the process attribute altogether, what will be used to process? Will it be #all, #form or #none?
Thanks,
Kunal
I found the answer. It will be #all if I do not specify process attribute but write partialSubmit="true".
Thanks,
Kunal