Code
Code Component
Code Overrides
Framer X

Integrate text input: get its value out when it's changed.

Overview

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

TextInput

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

App.tsx (Code override)

export const TextChange: Override = () => {
  return {
    // This is the same idea as onTap, except that we have 
    // a parameter here to keep track of the input text.
    onChange(text) {
      data.text = text;
    }
  };
};

export const GetText: Override = () => {
  return {
    // Change the text of the label below the text input
    text: data.text
  };
};

Conclusion

  • We can expose the change DOM event as a custom prop onChange. What other events can we use?
  • We can override any prop of a component, even a “custom” prop in our own code components!

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.