Code
Code Component
Code Overrides
Framer X

Integrate text input: "Press enter" keyboard event

Overview

This is the same idea as the “onChange” example.

The text input here is a standard HTML <input> which supports keypress event. We can wrap this in a code component and expose onAccept as a prop. In the code override, we can hook into onAccept in the same way as onTap, and use the updated text accordingly.

TextInput

class TextInput extends React.Component {
  ...
  handleKeyPress = e => {
    const { onAccept } = this.props;
    // We pass the new value of the text when calling onAccept
    if (e.key === "Enter") {
      const { onAccept } = this.props;
      onAccept && onAccept(e.target.value);
    }
  }
  render() {
    return (
      // Note we need to use "onKeyPress" instead of "onkeypress" 
      // as in HTML.
      <input type="text" onKeyPress={this.handleKeyPress} />
    )
  }
}

Notes

  • “Enter” is just one of the keys that we can handle in onKeyPress, find a list of other keys here.
  • onKeyPress is just one of the supported keyboard events. We can also use onKeyDown or onKeyUp depending on the use case.

PS: If you find this tip difficult to understand, check out this course I prepared for you, where concepts are explained in a more digestible way. No programming experience required!

PPS: See other pro tips, or share / request a new tip.


download Want the complete source file? Enter your email address below:

I'll also send you new tips when available. No spam, unsubscribe any time!


© 2018 jimu Labs, Inc.