I am using Office Fabric React in an spfx web part and within a MarqueeSelection /DetailsList in each row have a checkbox to represent a boolean value, On click the default callback function writes out to log whether the isChecked value is true/false.
How can I correctly wire up my component so that it correctly updates the value of the line data on click?
I have been unable to overload the bound function to pass an identifier value to update the value.
the component output is :
the function binding is:
this._onCheckboxChange = this._onCheckboxChange.bind(this);
the callback function is:
private _onCheckboxChange(ev: React.FormEvent, isChecked: boolean): void {
console.log(The option has been changed to ${isChecked}.);
}
I have been unable to overload the bound function to pass an identifier value to update the value.
I have also tried to wrap it in a span tag and fire an event on click
The end result should ideally update the 'Displayed' value of the associated object in the array of data to reflect the change in boolean value.
This issue was related to the use of a react checkbox from office react so please ignore the question
Related
I have been trying to figure this out for awhile but basically I have a list of tags with tags with onClick properties that should change a state variable postsShown to true. Tricky thing is the postsShown is supposed to be an array of boolean values and uses the index to differentiate which tag was clicked. Now the state variable does update but gets stuck and does not get detected by my conditional statement.
this is my code, I have tried calling the setState function with a callback but get an error
Your onClick event is not changing the object just the content inside the object. Since the pointer to the object didn't change React will not re-redner your component.
change your onClick function:
onClick={()=>{
const postsClone = [...postsShown];
postsClone[index]= true;
setPostsShown(postsClone);
}}
[...postsShown] will create a new reference by copying the top level of the object.
If you need to create a deep copy use
const postsClone = JSON.parse(JSON.stringify(postsShown));
I'm using the React Switch component straight from this website: http://react-materialize.github.io/react-materialize/?path=/story/components-switch--switch. I put this into my SideNav like so:
<Switch
id="Switch-11"
offLabel="Off"
onChange={(e) => exampleFunction(e)}
onLabel="On"
/>
I did it so that when the switch is clicked, it would call "exampleFunction()" which contains this:
const exampleFunction = (e) => {
console.log(e.target.value)
}
The problem is that when I look at the console for the value of the switch, it is always "on," even if I press it multiple times. I'm a little lost as to why this happens. Any advice would be appreciated. Thanks.
If you want to know whether the checkbox is checked, you need to use e.target.checked, looking at the source code from materialize, we can see the onChange is passed directly to the input element, so you need to use the checked attribute of the input element.
The value attribute has the following definition:
The value property sets or returns the value of the value attribute of a checkbox.
For checkboxes, the contents of the value property do not appear in the user interface. The value property only has meaning when submitting a form. If a checkbox is in checked state when the form is submitted, the name of the checkbox is sent along with the value of the value property (if the checkbox is not checked, no information is sent).
From: https://www.w3schools.com/jsref/prop_checkbox_value.asp
I have the below input field below set up with Autocomplete here:
https://material-ui.com/demos/autocomplete/
(first react-autosuggest example)
So when you type 002 these options come up. Though the problem is when you click on one of the options, I get undefined error. Below are settings for the Textfield I have on the page:
value: AccountNumber,
onChange: this.updateAccountNumber,
onBlur: this.updateAccountNumber,
So somehow when you click, value for this field ends up being undefined
i have a working Autosuggest CodeSandbox set up here with console.logs I added for testing here:https://codesandbox.io/s/m35z5l98ox
As you see as you type it prints one letter less (possibly consolelog kicks in before state update) which is fine but when you select an item from the list, it doesn't trigger an onChange event (which it should since value in the field is changing)... So if you click the field, you will get the full value you selected from the list ( which I don't quite know how that list value gets pasted into the field)...
To clarify: This Account Number field is set up with Redux, so what you type gets saved thru onChange to Redux Store. Once the suggestions gets displayed and you select one from the list, at that moment, value of the input field gets to be undefined and autosuggest fails to put what you clicked on, in the suggest list to inside the field.
I am thinking suggestions is wiping out the field to write down the value I clicked on into the field and failing to do that job, but can't figure why it's failing and how to fix it...
I am experiencing a very weird situation where I am accepting a prop within Square that comes from Board. I initialize it as value and am trying to give alert when user clicks on any number. This should be ideally very very simple though, while value shows on the board as 1, if I click on it, I get what you see object in the picture within function.
I am following React official tutorial
https://reactjs.org/tutorial/tutorial.html#completing-the-game
onclick event handler has its own scope variable value . Which is an onclick event object. That is why you can't access value object is defined at render method level.
update event handler
onClick={function(e) { console.log(value); }}
It's all because the way you implemented the onclick function there.It just lost the scope of the event. Please try with the code below.Replace the onClick function with this one.Hope it will work.
onClick={()=>{console.log(data)}}
I have an AngularJS custom component that essentially wraps around a Material Design mdSelect, but provides easy configuration of available, default, and current values via its bindings.
But the component functions as a general editing component in an mdDialog that can change its options based upon the thing being edited. Thus is a "Next" button to go to the next "thing" to be edited. When the button is pressed the custom component will have new available, default, and current values—something like this:
<foo-component default-value="dialog.getDefaultFoo()" current-foo="dialog.currentFoo">
</foo-component>
Note that the component, if a list of available values is not given (as in the example above), the component assumes a list of values with only one value, the "default-value" indicated.
So when a user selects "Next", the list of values in the mdSelect will change, because the value returned by dialog.getDefaultFoo(). The new selected value will be dialog.currentFoo.
But if dialog.currentFoo is null, I want the control to automatically select the indicated default value, or if no default is indicated, the first available value. That's easy enough when the component is created using $onInit. But once it is created, how do I know (inside the component) that the user has selected "Next" and the list of available values has changed?
In the code for the "Next" button, I call this.fooForm.$setPristine(). According to the documentation, the when this method is called the form controller will "propagate to all the controls contained in this form." So I considered having my custom control hook detect that $setPristine() is being called, so that it can automatically select a default value from the list if the new value is null. But how now I'm back in the same situation: how does my custom component detect that $setPristine() is being called on the form?
In essence, my custom component needs to detect when one of its bound values changes, and perform some custom update of other values under certain conditions. I know that I can use a getter/settter from outside the custom component, but how does the custom component detect that one of its bound values has changed?
To make matters more complicated, dialog.currentFoo is actually a function, which my component recognizes as a getter/setter function which will return/update the correct value based upon the state of the dialog. So I can't even detect that this value has changed, because the actual function never changes—only the value that it returns will change.
And it's actually even more complicated than that, because the mdSelect is only one piece of the object that gets sent to dialog.currentFoo; otherwise it isn't propagated outside the component.
Trying to summarize, I need to know in a custom component if the binding dialog.currentFoo, which is really a getter/setter method, would now return null so that the custom component could select a default value (also dynamic) based upon the current items (also dynamic) listed in the internal mdSelect. I would accept workarounds, such as detecting that $setPristine() has been called on the enclosing form. I would even accept a hack, such as forcing AngularJS to recreate the custom component when some external state changes.
This is tricky, because AngularJS is tricky, and because it's exceedingly hard to track information on custom AngularJS control/input components.
Above all the first thing that needs to be done is to make the custom component use the normal ngModel framework; trying to "fake" it using a two-way bound currentValue doesn't cut it for this complexity, and besides, ngModel is the "correct" AngularJS way to do it. To pull this off you'll need to use NgModelController. Finding out how to do this with a component is difficult in itself, although one page gave the magic formula. It goes something like this:
require: {
ngModelCtrl: "ngModel"
},
bindings: {
ngModel: "<"
//TODO add defaultValue or whatever other properties here
},
Then you don't access the two-way value directly; you use the NgModelController interface:
//get the current value
const foo = this.ngModelCtrl.$modelValue;
//set the current value
this.ngModelCtrl.$setViewValue(foo);
As best I can tell, if you add ng-model-options="{getterSetter:true}" to the component, the ngModelOptions will automatically get applied to your model, and getters/setters will be called automatically.
Now you are hooked into the whole ngModel framework, and use NgModelController to add/access validators and all sorts of advanced features.
Getting back to my needs, where I need to "reset the component" in certain conditions, I can patch into NgModelController#$setPristine(). The form controller recognizes my component is part of the ngModel framework, and calls $setPristine() when the form is reset to its pristine state.
this.$onInit = () => {
this.ngModelCtrl.$setPristine = () => {
myInternalValue1 = null;
myInternalValue2 = this.defaultValue;
};
this.ngModelCtrl.$setPristine(); //initialize default value
};
This explains the doubt I had about the form controller "propagat[ing $setPristine()] to all the controls contained in this form", which I mentioned in my original question. The secret is that the component must become part of the real ngModel system so that it can interact as AngularJS is expecting, as well as to gain access to important internal methods.