I have a paper-input item
<paper-input label="Test" data-ng-model="item" data-ng-blur="onBlur(x)" data-ng-change="onChange(y)"> </paper-input>
In the controller, the functions are defined as -
function onBlur(x)
{
...
}
function onChange(y)
{
...
}
On losing focus on the item, onBlur is called correctly. However, on changing data in the item, the onChange function is not called. Any ideas?
It seems that the behaviour of data-ng-change is to fire events only when you focus out of the element. To fire an event when changing data in the element, I used data-ng-keyup
Related
<input type="checkbox" onclick="onClickHandler()" onchange="onChangeHandler()" />
From within onClickHandler and/or onChangeHandler, how can I determine what is the new state of the checkbox?
The short answer:
Use the click event, which won't fire until after the value has been updated, and fires when you want it to:
<label><input type='checkbox' onclick='handleClick(this);'>Checkbox</label>
function handleClick(cb) {
display("Clicked, new value = " + cb.checked);
}
Live example | Source
The longer answer:
The change event handler isn't called until the checked state has been updated (live example | source), but because (as Tim Büthe points out in the comments) IE doesn't fire the change event until the checkbox loses focus, you don't get the notification proactively. Worse, with IE if you click a label for the checkbox (rather than the checkbox itself) to update it, you can get the impression that you're getting the old value (try it with IE here by clicking the label: live example | source). This is because if the checkbox has focus, clicking the label takes the focus away from it, firing the change event with the old value, and then the click happens setting the new value and setting focus back on the checkbox. Very confusing.
But you can avoid all of that unpleasantness if you use click instead.
I've used DOM0 handlers (onxyz attributes) because that's what you asked about, but for the record, I would generally recommend hooking up handlers in code (DOM2's addEventListener, or attachEvent in older versions of IE) rather than using onxyz attributes. That lets you attach multiple handlers to the same element and lets you avoid making all of your handlers global functions.
An earlier version of this answer used this code for handleClick:
function handleClick(cb) {
setTimeout(function() {
display("Clicked, new value = " + cb.checked);
}, 0);
}
The goal seemed to be to allow the click to complete before looking at the value. As far as I'm aware, there's no reason to do that, and I have no idea why I did. The value is changed before the click handler is called. In fact, the spec is quite clear about that. The version without setTimeout works perfectly well in every browser I've tried (even IE6). I can only assume I was thinking about some other platform where the change isn't done until after the event. In any case, no reason to do that with HTML checkboxes.
For React.js, you can do this with more readable code. Hope it helps.
handleCheckboxChange(e) {
console.log('value of checkbox : ', e.target.checked);
}
render() {
return <input type="checkbox" onChange={this.handleCheckboxChange.bind(this)} />
}
Use this
<input type="checkbox" onclick="onClickHandler()" id="box" />
<script>
function onClickHandler(){
var chk=document.getElementById("box").value;
//use this value
}
</script>
use onclick event on all checkboxes that you want to get their values whether they are checked or not.
<input type="checkbox" value="rightSideCheckbox" onclick='handleClick(this);'>
function handleClick(checkbox) {
if(checkbox.checked){
console.log(checkbox.value+"True")
}
else{
console.log(checkbox.value+"False")
}
}
const [checkboxval, setCheckboxVal] = React.useState(null);
const handleChangeCheckbox = (e) => {
setCheckboxVal(e.target.checked);
}
render() {
return <input type="checkbox" onChange={(e) => handleChangeCheckbox(e)}
}
I had a class component and then I created a button and added the onClick event to it.
Now I created a function to be called when that onClick event fires.
While referencing the function to onClick,
Why should we use something like {this.function-name} but not simply
{function-name}?
You may have many functions called function-name in different components. When you want to call them, you need to specify exactly which function you are referring to. Using the keyword this means you want to use the function-name which is attached to your current component.
this.function-name: function-name from the current component.
otherComponent.function-name: function-name from another component.
It is all about javascript scopes.
For example:
class Example extends Component {
clicked() {
console.log('clicked');
}
render() {
const innerFuncClicked = () => console.log('inner click');
return (
<button
onClick={clicked}
onClick={this.clicked}
onClick={this.clicked.bind(this)}
onClick={() => this.clicked()}
onClick={innerFuncClicked}
/>
);
}
}
As for the above code, I'll describe each "onClick" you will see.
Of course, you cant have several "onclick" as only the last one will override the rest.
1) function "clicked" is not defined in the scope so it will break
2) this will break as well as the "click" is happening inside the button component with a different "this"
3) this will work, as we bind the current "this" to the function
4) It will work as we create an arrow function that doesn't hurt the current "this"
5) this will work as the func "innerFuncClicked" exists in the scope
I would suggest you to read the basic understanding of 'this'.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this
console.log(this === window); //true
Basically, this is keyword which help us to bind your custom function/ event to global 'window' events.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
Not only for React, it's common for all JavaScript.
I've attached an onBlur event handler in a React component in which the logic sets the focus back to the target element (and writing this in TypeScript).
emailBlur(e: React.FocusEvent<HTMLInputElement>) {
e.currentTarget.focus();
e.preventDefault();
// re-ordering these statements makes no difference
}
This is bound
<input type="email" onBlur={this.emailBlur} />
Furthermore, the constructor contains
this.emailBlur = this.emailBlur.bind(this);
But the focus never gets set - if I click from the target element to another element, the focus never goes back to the target element.
Why isn't the focus being set back to the target element?
Have you tried using e.currentTarget and a timeout like this?
e.preventDefault();
const target = e.currentTarget;
setTimeout(
function () {
target.focus();
},
5
);
Why isn't the focus being set back to the target element?
Use setTimeout so the blur completes before you focus again 🌹
Having an Input from semantic-ui-react changed when the User writes something, does fire onChange and any parent component that includes the Input fires onChange as well. A process called bubble .... right?
Example
<li onChange={this.onListChange}>
<Input onChange={this.onInputChange}/>
</li>
Any change made in the Input, fires onInputChange() and onListChange() together one after another.
Although, when Input.value/text/content is changed dynamically, Input.onChange() is not called at all. So you have to call the onChange() function manually.
setFoo() {
this.input.value = 'foo';
this.inputChange();
}
But the problem here is, that when we call inputChange we don't get as e.target the component Input, nor data has anything to do with it, and the most important ... :
No Bubbling effect.
Which means that onListChange() will not be fired.
Question:
How can I achieve a proper bugless bubbled onChange() on Semantic-UI-React?
Not exactly sure about semantic-ui-react because I've never used it, but this in theory should work (it works for a normal input):
setFoo() {
this.input.value = 'foo';
const event = new Event('input', { bubbles: true });
this.input.dispatchEvent(event);
}
If I have a View in backbone.js and it has an event in the events list:
events: {
'click #somebutton': 'clicked'
},
clicked: function () {
console.log('clicked');
}
How can I then disable/enable that event? So for instance if its clicked then
the event is removed (the button remains on screen but is greyed out etc). When some other part of the view is updated or whatever the event
enabled. Sure I can use jquery but I want to know if this functionality is available in backbone.
Thanks for any answers
Paul
You can always use delegateEvents() and undelegateEvents() to redo your event binding between the DOM and your Backbone View. That said, I usually just keep the event handler and add a conditional in the handler.
// .disabled class (CSS) grays out the button
clicked: function(event) {
var buttonEl = $(event.currentTarget);
if (buttonEl.hasClass('disabled')) {
// Do nothing
} else {
// Do something AND...
buttonEl.addClass('disabled');
}
}
Then you can have your other view or code simply removeClass('disabled') when you want to restore functionality.
UPDATE - disabled property
See comments, but a simpler, much better solution is to use the disabled property disabled="disabled" of buttons.
Use delegateEvents and undelegateEvents for binding and unbinding events. Check for reference: delegateEvents