Event handling allows to define event handler when a button is clicked, an input changes its value, a keyboard key goes up, etc ...
The event handlers name are the native DOM event handler: onclick
, oninput
, onkeyup
, onchange
and so on.
The onclick
is called when the button is clicked. In the following example, the onclick function is defined inline:
const TestButtonClickInline = () => {
return section(
h1("Button onclick inline"),
button(
{
onclick: (_event: Event) => {
alert("Clicked");
},
},
"Click me"
)
);
};
The onclick function can be extracted to its own function:
const TestButtonClickMethod = () => {
const buttonOnclick = (_event: Event) => {
alert("Clicked");
};
return section(
h1("Button onclick method"),
button(
{
onclick: buttonOnclick,
},
"Click me"
)
);
};
In this example, the say method takes a message and returns a function compatible with onclick handler
const TestButtonClickMethodCurried = () => {
const say = (message: string) => (_event: Event) => {
alert(`Clicked ${message}`);
};
return section(
h1("Button onclick method curried"),
button(
{
onclick: say("Hello"),
},
"Say hello"
),
button(
{
onclick: say("Bye"),
},
"Say bye"
)
);
};
This example uses a bau state to store the input text value. The button have access to the input value though inputState.val
const TestInputOninput = () => {
const inputState = bau.state("");
return article(
h1("Input oninput with bau.state"),
input({
placeholder: "Enter username",
value: inputState,
oninput: ({ target }) => (inputState.val = target.value),
}),
button(
{
onclick: () => {
alert(inputState.val);
},
},
"Login"
)
);
};
In this case, the inputEl is created outside the tree. In the button onclick handler, the value of the input is obtained from inputEl.value
const TestInputOninputElement = () => {
const inputEl = input({
placeholder: "Enter username",
onkeyup: ({ key }: { key: string }) => {
if (key == "Enter") {
alert(inputEl.value);
}
},
});
return article(
h1("Input onkeyup without bau.state"),
inputEl,
button(
{
onclick: () => {
alert(inputEl.value);
},
},
"Login"
)
);
};
This example uses a bau state to store the input checkbox boolean value.
const TestInputCheckboxOninput = () => {
const checkedState = bau.state(false);
return article(
h1("Input checkbox oninput with bau.state"),
input({
type: "checkbox",
checked: checkedState,
oninput: ({ target }) => (checkedState.val = target.checked),
}),
div("Is checked: ", () => (checkedState.val ? "Checked" : "Not Checked"))
);
};
This example uses a bau state to store the input radio value.
const TestInputRadio = () => {
const checkedState = bau.state("");
const oninput = ({ target }: { target: HTMLInputElement }) =>
(checkedState.val = target.id);
return article(
h1("Input radio"),
input({
type: "radio",
id: "one",
name: "radio",
checked: true,
value: checkedState,
oninput,
}),
label({ for: "one" }, "One"),
input({
type: "radio",
id: "two",
name: "radio",
value: checkedState,
oninput,
}),
label({ for: "two" }, "Two"),
div("Choice: ", checkedState)
);
};
The select element uses the onchange
handler to signal a change:
const TestSelect = () => {
const selectState = bau.state("volvo");
const onchange = ({ target }: { target: HTMLSelectElement }) =>
(selectState.val = target.value);
return article(
h1("Select"),
label({ for: "cars" }, "Choose a car: "),
select(
{ name: "cars", id: "cars", onchange, value: selectState },
option({ value: "audi" }, "Audi"),
option({ value: "volvo", selected: true }, "Volvo"),
option({ value: "saab" }, "Saab")
),
div("Selected ", selectState)
);
};