So im calling $state.go from a class after an element change event. I am able to change the state and go to the desired route. The component changes successfully as well.
The problem is: I need to click an element (programmatically) in the destination component but I'm unable to do so.
I tried using the then-function of state go. Referenced the element that I wanted to trigger. It just returns ye.fn.init {} whenever i try to log it. Maybe it just isn't loaded yet?
You can pass a parameter in $state.go function like this:
$state.go('stateName', { param: "test" } );
Then in the component you can access that value and procceed with any action.
The way to get state params depends on the version of ui-router. (if you want specify the version)
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
I am creating a profile screen for user in my apps . I am using lightbox from React-Native-Navigation by wix to perform an edit profile . So , the user will click the touchableopacity and a lightbox will pop up and the user will enter the new information and save it . So, im wonder is it possible if i want to pass the textinput value from lightbox to the parent(profile.js) so that i can setstate in the profile.js ?
Yes this is possible. You will need to send the data as props to the parent. If you haven't done it before it might feel a bit tricky but you'll get there.
From the parent:
<LightboxComponent
userData={this.handleUserData(data)}
/>
handleUserData(data) {
/* Do something with the data here */
}
From the child:
To send the data you need to set an onChange event or similar on the input you want to capture, like this:
<input name="user-name" onChange={ (e) => this.props.userData(e.target.value) }
This will make the input data from the child get sent to the parent. Every change will trigger a re-render of the affected components.
If your app complains about not being able to setState correctly, then you need to bind this in the parents constructor like this:
this.handleUserData = this.handleUserData.bind(this);
I would also say pass the parent's function pointer to the child as props (as seen on the React site). Although some people opt for using an event emitter. I'm actually really curious about more developers' opinions on that.
Is derailing a thread on StackOverflow grounds for epic down voting?
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.
My code is here - https://codesandbox.io/s/92xmm6zvmo
The idea is that the user clicks on an Edit link in a table, the row expands and a textarea opens in the expanded row so that the user can edit their JSON in it. This is all working great, except for the onChange event handler of the textarea. When the event fires it seems to be missing a reference to this, and is unable to bind an appropriate event handler. I don't understand why this is the case, I would expect there to be a reference to the ExpandableTable component available as the expandedRowRender() method belongs to that class.
The other form fields (that are not dynamically added) appear to be working fine.
Showing your code make things easier.
I think it's working now.
https://codesandbox.io/s/wkym185vpl
The problem is, you were not binding correctly the "this" context. if you are going to use arrow function, make sure all class functions are:
Class MyClass{
expandedRowRender = () => {}
}
if you are doing expandedRowRender(){} make sure bind it in the constructor.
Class MyClass{
constructor(){
this.expandedRowRender = this.expandedRowRender.bind(this);
}
...
expandedRowRender(){}
}