I'v been working on a project & decided to work in a unit file i have imported a few components & successfully used them, Only when trying to use the event handlers of the components i got lost.
I have researched & know it is possible i just don't know how & what i have to-do for example:
unit Unit1;
interface
uses Component;
var
Component: TComponent;
implementation
procedure Example1;
begin
Component:=TComponent.Create(nil);
//do something...
end;
procedure OnComponentChangeEvent(Sender: TObject); <<<< [Use event onchange of component]
begin
//do something...
end;
end.
Related
I simulated my Context + DND problem in https://codesandbox.io/s/adoring-booth-33vqo . I have other components which will be added to this example and I will use a Context hook to share values across the page.
After the initial render, everything looks fine. The idea of the list is to change the order within itself and when ones changes the order with drag-drop, it throws an "Invalid Hook" error.
So the (first) real question is, what is triggering this error which is linked to the line
const { lang1Library, updateLang1Library } = useContext(LangContext)
;
Thanks in advance for your help.
Geo
It's not a good approach to provide a link for the whole project even if it is small. But I had a quick look and there's at least one thing you're doing wrong:
// DragEndFct.js
export default function DragEndFct(result, libName) {
const { lang1Library, updateLang1Library } = useContext(LangContext);
This is not React component, but it uses a hook - and it is wrong. Hooks have a special meaning in React and should be used properly (Rules of Hooks).
You can't use hooks inside regular functions and expect them to work. That is why you are getting that error.
So, there are many ways you can try to fix this. For instance, DragEndFct is a regular function, you can declare more arguments and pass stuff you get from context:
// you are using it in components right ?
function DragEndFct(result, libName, param3, param4) {}
// so you probably have access to the context there
// and can pass data from the context when you call it.
// something like this
onDragEnd={function (result) {
console.log();
DragEndFct(result, StaticVars.LANG1_LIBRARY_NAME, lang1Library, updateLang1Library);
}}
You could even make DragEndFct to be a React component - it can just return null (which means no UI will be rendered) but in that case you will have hooks and all other stuff there. It really depends on what you need and how you will use it.
So I am trying to work with FullCalendar and I want to have the user be able to edit an event details, click update and I locally update the event and then push it up to the server. I have the following code, but the issue is when there are multiple changes, is calling the event callback multiple times. Is there a way I could do this just once to save on many API calls? Here is the code I have
let currentEvent = calendarApi.getEventById(eventId);
currentEvent.setExtendedProp('notes', notes);
currentEvent.setExtendedProp('person', person);
Maybe there is a different method I am just not seeing in the docs?
The undocumented mutate method that's used to implement setExtendedProp accepts an object that can have multiple properties. You could use it like this:
event.mutate({
extendedProps: {
notes: notes,
person: person,
},
})
or, using object property value shorthand:
event.mutate({extendedProps: {notes, person}})
I have absolutely no experience with fullcalender though, so use at your own risk!
i have react class component that have event
constructor(props) {
super(props);
this.monthRef = React.createRef();
this.yearRef = React.createRef();
this.state = {
moIndexActive: props.initialMonth - 1,
yeIndexActive: years.findIndex(y => y === `${props.initialYear}`),
};
}
//some code blablabla
// this error occur in this line bellow
componentWillUnmount() {
this.monthRef.current.removeEventListener('scroll');
this.yearRef.current.removeEventListener('scroll');
}
this component used in functional component,
when i test the functional component there is error message
i am using React Testing Library for test this, i already searched on google but not yet found solution for this, please help me.
if there is any way to mock the removeEventListener on react testing library or Jest.
thanks in advance.
The removeEventListener needs two arguments, type and listener.
type specifies the type of event for which to remove an event listener and
listener is the EventListener function of the event handler to remove from the event target.
So try to put a null in the place of listener like this
this.monthRef.current.removeEventListener('scroll',null)
Hope it works.
alfan-juniyanto,
The error message tells you exactly what's wrong -- your call to the method removeEventListener('scroll'), in your componentWillUnmount() function, is expecting two parameters:
The event to stop listening to,
The current event handler that you had previously registered when you called addEventListener (which doesn't appear to be in the code snippet you supplied).
For more information, you can read here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener
However, to specifically answer your question, you should pass a pointer to the event handler that you used in the addEventListener cycle.
If you just want to make this error message stop for the purposes of your test, you could do something like this:
componentWillUnmount() {
const _fnEmptyFunctionPointer = ()=>{};
this.monthRef.current.removeEventListener('scroll', _fnEmptyFunctionPointer);
this.yearRef.current.removeEventListener('scroll', _fnEmptyFunctionPointer);
}
The code snippet I provided above simply just passes an empty function as the second (required) parameter for the removeEventListener method (really however, like I said previously, you should be passing the pointer to the original function you registered for the listener).
Hope this helps at least explain whats going on with that error you recieved.
Good luck!
Anyone who has worked with React Drag & Drop, help needed!
In this example (https://github.com/react-dnd/react-dnd/blob/master/examples/01%20Dustbin/Multiple%20Targets/Dustbin.js#L20) on Line 20, there is props.onDrop(monitor.getItem()); this code where the function onDrop passed to component Dustbin via props is called.
I need to know if there is a way of calling a method defined inside Dustbin instead of passing via props.
Eg: this.onDrop(monitor.getItem()); or currentComponent.onDrop(monitor.getItem());
Yes there is, the third argument to drop is 'component' (see here: http://react-dnd.github.io/react-dnd/docs-drop-target.html), which is the actual component that was dropped into. So you can do something like:
const dustbinTarget = {
drop(props, monitor, component) {
component.onDrop(monitor.getItem());
},
};
This argument is available for all of the drop target methods except for canDrop, since the instance may not be available at the time it was called.
I have a component that on the click of a button calls a flux action:
onSend(event) {
MessageActions.sendMessage(this.state.currentMessage);
};
Now, I want the test to basically be able to simulate the button click (I know how to do that).
And on the button click check to see if that "MessageActions.sendMessage" function is called with a given string.
How do I access MessageActions from my test?
The object I'm testing is called ChatMessage, but the MessageActions is defined outside the React.CreateClass code.
I've tried things in my test like:
var messageActions = require('myactions');
expect(messageActions.sendMessage).toBeCalled();
and
expect(ChatMessage.MessageActions.sendMessage).toBeCalled();
But nothing is working as it just says MessageActions is undefined.
The ReactJS docs have a (crappy) example of testing a store but nothing about how you test Actions used within your component.
Any help please
This should work:
expect(MessageActions.sendMessage).toBeCalled();
Just make sure to declare MessageActions
var MessageActions = require('path/to/MessageActions');
I suspect you're getting the undefined error because you've forgotten the above declaration within the "describe" function.