Custom Input Component

When using custom input components, they must be passed in as props, like so:
1
<EasyEdit    
2
    type="text"
3
    onSave={() => {}}
4
    editComponent={<CustomInput />}    
5
    displayComponent={<CustomDisplay />}
6
/>
Copied!
When defining a custom input component, the function setParentValue is injected into your custom component, which must be called in order to pass the desired value up to the parent EasyEdit component.
For example, if your component was a text field that needed to set the EasyEdit value as a user id based on a username entered, you would need to pass the id to this.props.setParentValue in order to get that value to the EasyEdit component.
e.g.
1
// Inside your custom 
2
input​onChange(searchTerm) {
3
    getUserIdByUsername(searchTerm).then((userId) => {
4
    this.props.setParentValue(userId);
5
})}
Copied!
​
​

Custom Display Component

Preventing Edit

Last modified 1yr ago

Copy link