How to update custom component props in the designer

Module Development
1

I am tinkering around with creating a custom TextField to explore and learn how to build a component for perspective. I have a component with many props to set different aspects of the component but what I am struggling with is understanding how I update a prop from within the component.

For example with a text field how do I update the value prop as the user types into the input?

1 Like
2

I have an event being fired onBlur of my custom textfield component but how do I get the value sent with that event to also update value under props in the sidebar? I am trying to replicate the same behavior the normal Perspective Textfield.

image

3

If you really need to write it manually, then you should have access to an implicit props that contains a reference to the ComponentStore, which itself contains a reference to the component's props, meta, custom as PropertyTree objects with a write method, e.g:
this.props.store.props.write("path", value);

However, the input fields in Perspective are a fair bit more complicated than just simple <Input> wrappers since they need to handle theming across browsers, the "defer updates" settings, and some other aspects. It may or may not be easier to extend the base <InputField> class for your own purposes.

4

It would be more difficult in my case since I am bringing in a React UI library. I am starting with a TextField since it encompasses a bunch of the things I need to know how to do but I plan on integrating a bunch of other components that currently do not exist in Perspective.

I was able to get that value prop to update so thank you for that!

1 Like