Handling User Input

Since Sandstone components' architecture is virtually the same as React's, you can handle interactions in the similar way:

class SuperInput extends WebComponent {
    handleChange = (e) => {
        this.setState({
            email: e.target.value,
        });
    }

    render() {
        return <input name="email" onInput={this.handleChange} />;
    }
}

However, because Sandstone is using Preact under the hood, you get a convenient linkState method on a component which you can use like so:

class SuperInput extends WebComponent {
    render() {
        return <input name="email" onInput={this.linkState('email')} />;
    }
}

Optionally, you can provide a second 'path' argument to explicitly provide a dot-notated path to the new state value for more custom bindings.

Next: Flags →