Handling User Input

WebComp

Search…

Introduction

Lifecycle Methods

Rendering From String

Handling User Input

Since WebComp components' architecture is virtually the same as React's, you can handle interactions in the similar way:
1
class SuperInput extends WebComponent {
2
  handleChange = (e) => {
3
    this.setState({
4
      email: e.target.value,
5
    });
6
  }
7
​
8
  render() {
9
    return <input name="email" onInput={this.handleChange} />;
10
  }
11
}
Copied!
Linked State
WebComp also provides convenient linkState method on a component which you can use to manage simple inputs:
1
class SuperInput extends WebComponent {
2
  render() {
3
    return <input name="email" onInput={this.linkState('email')} />;
4
  }
5
}
Copied!
Optionally, you can provide a second path argument to explicitly provide a dot-notated path to the new state value for more custom bindings.

Rendering From String

Flags

Last modified 2yr ago

Copy link