How to add event handler and methods in lightning component?

Get Help
1 
EmailComponent: {
          y: 50,
          InputWithQwerty: {
            type: KeyboardInput,
            keyboardType: KeyboardQwerty,
            input: {},
          },
          Label: {
            mount: 0.5,
            x: 30,
            y: 10,
            text: { text: "Email", fontSize: 30 },
          },
        }

want to add " selectKeyOn" METHOD and " $toggleKeyboard" EVENT on this component.

2

hi @souvik. Once a component has the focus, the event handlers for the key strokes would be detected immediately. However, you’d need to add the appropriate key handlers as a member function of your component. The documentation explains it here: LightningJS.io - Documentation.

So for example, if on your component you want to detect every time a user pressed the “A” key on their keyboard, you’d need to add

_handleA() {
  console.log("A key pressed!");
}

And so on for all the keys or use the catch-all _handleKey() method.

Hope this helps.

3

@eduardo.guzman thank you for your help, in storybook component $onSoftKey() method triggered for keypress, want to state change when key is pressed but got some some error.

$onSoftKey(event) {
    let { key } = event;
    if(key=="space")   this._setState("HomeSignInInfoButton")
}

cannot read properties of undefined (reading ‘_getMostSpecificHandledMember’) at StateMachineRouter.focusBottomUpEvent

btw $onSoftKey method is invoked in the root. any suggestions?

4

Can you confirm that this is the component you’re trying to setState on? It could be a scope issue and this is not the instance of the component.

Using an arrow function may fix

$onSoftKey = (event) => {
5

@onSoftKey event is not fired when switched to arrow syntax (event function declared in root of the page). :pensive: