I want to set one of my parent's attributes with my event's start time, but I cant reach this.props from inside the function(info) method. How could I reach tha method I want to use?
eventReceive={function (info) {
this.props.onChangeStartDate(info.start);
}}
onChangeStartDate is one of my parent's function which sets the starting date of an appointment in the parent component and I want to give the event's data which I just added in the calendar as a parameter to that function.
I got the following error:
Cannot read property 'onChangeAppointment' of undefined
Thanks for your help.
The following will solve your error.
eventReceive={(info) => {
this.props.onChangeStartDate(info.start);
}}
Where
() => {} is an arrow function commonly used. See documentation.
The reason the error is occuring is because you losing the context of this inside the scope of the function.
Related
Here is my exemple :
https://codesandbox.io/s/test-uz-713xy
As you can see in this rather nice example,
I try to assign 2 differents methods to 2 differents buttons ("skyfall" and "vileMurder").
But these methods are calling from outside of my class, they are therefore not correctly recognized and I got the following error message : skyFall is not defined
or vileMurder is not defined
is anyone know how to fix that for me please ?
Those function are indeed not defined in the scope you are calling them.
This can be fixed in two steps:
1. Pass the functions as props from the Profils component
<IsHeStillAlive
skyFall={this.skyFall}
vileMurder={this.vileMurder}
panel={panel}
And change the mapping function to take a lambda instead of function because functions bring their own this variable bound to the function context.
this.state.data.map((panel) => {
2. Use the props from IsHeStillAlive
<Button onClick={() => props.vileMurder()}>
...
<Button onClick={() => props.skyFall()}>
The changes above will be enough to have the functions recognised and executed but there are other errors down the line, also related to the context of this. I recommend that you read the MDN doc about this.
You could also be interested to convert your components to react hooks. Although it is not mandatory, this is now the recommended way to define components and it prevents most of the context binding issues to happen.
I am getting the below error while binding the values to the function.
TypeError: Cannot read property 'bind' of undefined
Please see the code below:
<button className={classes.ButtonStyle} onClick={props.onClickHandler.bind(null,props.id)}>{props.children}</button>
But the arrow function notation is working fine though:
onClick={(e)=>{props.onClickHandler(props.id,e)}}
May I please know where I have done wrong? Also I am not using class based components but only functional based components(hooks).
The onClickHandler function is as below:
const onClickHandler = (id, e) =>{
e.preventDefault();
console.log('buttonSetNullHandler', id);
}
It's difficult to know for sure without looking at your program as a whole, but here's what's possibly happening:
With the arrow function style, props.onClickHandler is evaluated at the time the button is clicked.
With the bind style, the bind will be executed when the component first mounts.
My guess is that when the component first mounts, props.onClickHandler is not set, but it is being set in a subsequent render that happens before you click the button.
It should be easy to check by putting a console.log(props) in the render function and seeing how many times it happens and what the props are each time.
As an aside, I personally would go with the arrow style over the bind style - onClick={e => props.onClickHandler(props.id,e)} is likely to be much less surprising to the developer coming after you. :)
I am trying to change a variable in react with a callback function but cannot seem to do so. Here is my react component:
const MyComponent = () => {
let scenePinned;
const sceneCallback = event => {
if (event && event.state === 'DURING') {
console.log('Pinned');
scenePinned = true;
} else {
console.log('Not Pinned');
scenePinned = false;
}
};
console.log(scenePinned);
return (
<div>
<div style={scenePinned ? 'pinned' : 'not pinned'}/>
{(progress, event) => (
//Stuff Happens Here
), sceneCallback(event) )}
</div>
);
}
I am using react-scrollmagic and am trying to get the scenePinned variable to change from false to true and back to false again when scene is pinned to top. The console logging of Pinned and Not Pinned is happening correctly but I cannot seem to change the scenePinned variable. I am sure this is something very basic that I am not getting but I cannot understand why this is happening. Any help would be appreciated.
Note: I have tried using state to store the value but the callback is fired on scroll so the maximum depth is exceeded when trying to use state to store the scrolling status.
You need to use state for this. Otherwise the variable is reinitialized every time the component is rendered, and the value is lost.
console.log(scenePinned);
will run for the first time when the page loads
with react we use state the handle dynamic values.
or use rxjs
or create your own object and set listeners on it. with some custom event
so ex. with state
state={scenePinned:null}
then inside render method console.log(this.state.scenePinned)
A possible solution is to define a state variable in a parent component that will pass it to <MyComponent> as a prop.
Them move the sceneCallback function to the parent component and pass it as a prop to <MyComponent>
An explanation on how to define such a callback exists in many places. Here is one: (mine... ;) https://stackoverflow.com/a/55555578/5532513
I am new to VueJs and I am doubtful about passing the optional payload
Could anyone please tell me how to pass the value returned by a computed function in the child component to the parent component using the optional payload.
I want to implement a separate independent search component which returns the search results to all other components. The computed function looks like this:
get computedSports () {
if (!this.searchModel || this.searchModel.length === 0)
return this.sports
else
return this.fuseSearch.search(this.searchModel)
}
This is how I am trying to pass the value returned by computed function to its parent component in the child template:
#input="$bus.$emit('computed-sports', computedSports)"
In the parent component, this is how I am trying to access the value of the child's computed function:
v-on:computed-sports=""
I am not quite sure how to access the value here. Could anyone help me out in this?
Thanks!
The argument to a v-on should be a method or inline function that takes the payload as an argument. For example
v-on:computed-sports="handleComputedSports"
and your method might be defined
handleComputedSports(theValue) {
console.log("The value is", theValue);
}
There's an example in this section of the documentation. Your emit is fine. The fact that the value comes from a computed makes no difference to anything.
I'm invoking a function like below and understand this is why im getting this error. Is there a way to not invoke the function but still pass the event property?
onMouseOver={(event) => { this.moveBall(event) }}
The reason for wanting to do this is so I can do a check in the function like so:
const element = event.target ? event.target : event;
As I want to re-use this function to pass an element through on load:
// Below line is in a constructor.
this.navItem = document.querySelector('.navigation__item');
// Being called after my render
this.moveBall(this.props.navItem);
Feels like this should be doable..
I've managed to fix this with the below code but I believe that there must be a better way to achieve this:
window.addEventListener('load', () => {
const activeState = document.querySelector('.navigation__item .active')
this.moveBall(activeState)
});
** Update **
Full component code
https://jsfiddle.net/fvn1pu5r/
According to your last update all you need is just move first call to this.moveBall to react lifecycle hook componentDidMount. This ensures that DOM will have .navigation_item nodes in it. So, remove lines
window.addEventListener('load', () => {
const activeState = document.querySelector('.navigation__item .active')
this.moveBall(activeState)
});
from render method and add componentDidMount method to your class, like this:
componentDidMount() {
const activeState = document.querySelector('.navigation__item .active');
this.moveBall(activeState);
}
This should work.
Your moveBall function is being called with undefined as the argument at some stage. The event.target ? check then crashes with the error you gave.
The onMouseOver is likely always fine, as React supplies that.
Instead, I imagine it's the manual call you gave at the end. Is there a time when your this.props.navItem doesn't have a value?
Worth logging out that property right before calling the function to be sure it's always as you expect.