I would like to call detectChanges() of a component from a js-module, so I pass it as an argument of a function. But I am not sure to what I need to bind "this".
Right now I pass it like this
someFunction(this.cd.detectChanges.bind(this.cd))
where cd is ChangeDetectorRef. If I call the bound function inside someFuction, would this do the same as calling detectChanges() from inside the component? I am just not sure how the context in ChangeDetectorRef works. Is this just a new object for every component?
Related
I'm calling a component <B setHasChecked={()=>{setCheckedClientId(true)}}/> from within component "A", inside component "A" I declare the hook const [checkedClientId, setCheckedClientId] = useState(false);, and inside component "B" I execute props.setHasChecked();.
Even though this is working fine, i still get an error on the console:
React has detected a change in the order of Hooks called by "A"
Previous render Next render
------------------------------------------------------
1. useState useState
2. undefined useRef`
that's because you are not passing any parameter to props.setHasChecked();
I would suggest better pass a callback function from A to B. And in the callback function which resides in A you can call the setChecked function.
I've been wrapping my head around this for a while and I'm sure it's something simple but I cant quite get it to click. Learning React I am trying to pass a state as an argument from a child to a parent
The Child:
handleSubmit() {
this.setState({finalValue: this.state.inputValue})
this.props.changeFont(this.state.finalValue)
}
The Parent:
<Fonts
changeFont={()=> this.setState({fontState: this.state.finalValue})}
/>
Obviously this code doesn't work currently but that's essentially what I'm trying to do; pass the this.state.finalValue value as an argument to be used in the parent so I can use it in the parent component as a value.
setState is asynchronous and does not immediately mutate this.state, so if you want to perform an action immediately after setting the state on a state variable you should use setState callback.
setState(updater, [callback])
Child:
handleSubmit() {
this.setState({finalValue: this.state.inputValue},
()=>this.props.changeFont(this.state.finalValue)) //callback
}
Parent:
Pass parameter to function from the child component
<Fonts
changeFont={(finalValue)=> this.setState({fontState: finalValue})}
/>
I wonder how does this line work:
this.ref.markForCheck();
Or:
this.ref.detach();
While ref is: ChangeDetectorRef
I didn't see a way to get in a service the component that called you, so how does angular knows which component called it when I call this.ref.detach(); and detach the right component?
I would expect a call like this.ref.detach(this); so I pass the reference to the component, but seems like angular service has a way to access the caller?
Added jsfiddle https://jsfiddle.net/1hk7knwq/11788/
Look at the test() call, somehow the ref service is also getting the component instance without me explicitly passing it.
Thanks
I have a member function for my react component. In that function I use set state to update component state using this.setState. Now I use the same function in all of my components. Can I make it as a common function? Then how can I access this for calling this.setState inside this common function
I'm using Sinon to spy on the method, but the method I'm spying doesn't seem to be called at all when I try to Simulate onSubmit on the form tag.
Here's a JSFiddle.
First of all, this line:
React.addons.TestUtils.Simulate.submit(Instance, form.getDOMNode());
Should be:
React.addons.TestUtils.Simulate.submit(form.getDOMNode());
But that doesn't solve the problem, because of the way your component is structured. You're already giving the current _handleSubmit function to React to call, and React will invoke that function. It won't call Instance._handleSubmit(), which is the one you've replaced. If you change your component to something like:
var that = this;
...
<form onSubmit={function() { that._handleSubmit()}}>
It works because you explicitly call the method on the instance.
But I would advice you to not assert that the method was called, but instead assert that whatever side effect it should perform was actually performed. Like mutating state, calling an external service, etc.