You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
37 lines
1.0 KiB
37 lines
1.0 KiB
7 years ago
|
# Handling User Input
|
||
|
|
|
||
|
|
Since Pillar components' architecture is virtually the same as React's, you can handle interactions
|
||
|
|
in the similar way:
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
class SuperInput extends Pillar {
|
||
|
|
handleChange(e) {
|
||
|
|
this.setState({
|
||
|
|
email: e.target.value,
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return <input name="email" onInput={this.handleChange.bind(this)} />;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
However, because Pillar is using [Preact](https://github.com/developit/preact) under the hood, you
|
||
|
|
get a convenient `linkState` method on a component which you can use like so:
|
||
|
|
|
||
|
|
_**Note:** the example above uses `.bind(this)` for demonstration purposes, but it's not a
|
||
|
|
recommended way. Use [autobind-decorator](https://github.com/andreypopp/autobind-decorator) or
|
||
|
|
[decko](https://github.com/developit/decko) in real code._
|
||
|
|
|
||
|
|
```jsx
|
||
|
|
class SuperInput extends Pillar {
|
||
|
|
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.
|