Mastering Preact: Checkboxes, Radio Buttons, and Refs Simplified
Written on
Chapter 1: Introduction to Preact
Preact is a lightweight front-end framework that shares similarities with React but offers a simpler and less bulky alternative. In this guide, we will explore how to utilize Preact for front-end development, specifically focusing on checkboxes, radio buttons, and refs.
Section 1.1: Implementing Checkboxes
You can easily integrate checkboxes into your Preact application and capture their selected values. Here's a basic example:
import { Component, render } from "preact";
export default class App extends Component {
toggle = (e) => {
let checked = !this.state.checked;
this.setState({ checked });
};
render(_, { checked }) {
return (
<div>
<input type="checkbox" checked={checked} onClick={this.toggle} /></div>
);
}
}
if (typeof window !== "undefined") {
render(<App />, document.getElementById("root"));
}
In this code snippet, we initialize the checked state and link it to the checked prop of the checkbox input. The onClick event triggers the toggle method to update the state.
Section 1.2: Utilizing Radio Buttons
Similarly, radio buttons can be implemented to allow users to select one option from a set. Consider the following example:
import { Component, render } from "preact";
export default class App extends Component {
constructor() {
super();
this.state = {
fruit: "apple"};
}
onChangeValue = (event) => {
this.setState({ fruit: event.target.value });};
render(_, { fruit }) {
return (
<div>
<input type="radio" value="apple" checked={fruit === "apple"} onChange={this.onChangeValue} /> Apple
<input type="radio" value="orange" checked={fruit === "orange"} onChange={this.onChangeValue} /> Orange
<input type="radio" value="grape" checked={fruit === "grape"} onChange={this.onChangeValue} /> Grape
</div>
);
}
}
if (typeof window !== "undefined") {
render(<App />, document.getElementById("root"));
}
In this example, the onChangeValue method listens for changes in the selection of radio buttons, updating the state accordingly.
Chapter 2: Working with Refs
Section 2.1: Using createRef
To create a reference to a DOM element, you can utilize the createRef function. Here’s how it can be implemented:
import { Component, createRef, render } from "preact";
export default class App extends Component {
ref = createRef();
componentDidMount() {
console.log(this.ref.current);}
render() {
return <div ref={this.ref}>foo</div>;}
}
if (typeof window !== "undefined") {
render(<App />, document.getElementById("root"));
}
By assigning our ref to the div, we can access its DOM node when componentDidMount is called.
Section 2.2: Callback Refs
Alternatively, you can use callback refs to obtain a reference to an element. Here’s an example:
import { Component, render } from "preact";
export default class App extends Component {
ref = null;
setRef = (dom) => (this.ref = dom);
componentDidMount() {
console.log(this.ref);}
render() {
return <div ref={this.setRef}>foo</div>;}
}
if (typeof window !== "undefined") {
render(<App />, document.getElementById("root"));
}
In this case, the setRef function captures the DOM node and assigns it to this.ref, allowing us to log its value during the component lifecycle.
Conclusion
With Preact, adding checkboxes and radio buttons is straightforward, and accessing DOM elements through refs enhances your application's interactivity.