Events and actions
Bind a node's onclick/onfocus/onblur/onchange to a named action handler.
A node binds an event to a named action in its props (see §8 Events and actions). Pass an actions map keyed by action name; each handler receives the DOM event and the binding's params:
import { , type } from "@joy-dom/react";
import type { Spec } from "@joy-dom/spec";
const : Spec = {
: 1,
: { ".buy": { : "flex" } },
: [],
: {
: "div",
: {
: ["buy"],
: { : "action", : "checkout", : { : "joy-01" } },
},
: ["Buy now"],
},
};
const : = ({ , }) => {
.();
.("checkout", ?.);
};
export function () {
return < ={} ={{ }} />;
}A binding that names an action absent from the map throws at render, so a typo surfaces immediately. Pass missingAction="ignore" to leave such events unbound and render the rest of the tree.
The renderer wires bindings on built-in nodes only. A custom component receives the raw node, so it reads any bindings from node.props and decides how to use them. The interactive widgets use case walks through a card that mixes both.