MichaelCereda/react-native-form-generator

Form values drop to initial when show/hide components

IgorUsoltsev opened this issue · 0 comments

Hi there!

Thanks for the amazing plugin. But I have the following issue.

In my code I have a form in a toggled block - it is shown/hidden by a button click.

So, my form block is shown this way:

var { showFilters } = this.state;
return (
...
<Form
    ref='filterForm'
    onFocus={this.handleFormFocus.bind(this)}
    onChange={this.handleFormChange.bind(this)}
    label="Filters"
>
    {showFilters &&
        tables_filters
    }...

It is rendering just fine, but when I hide this block and show it once again, my form elements values are dropped to initial values.

formData from state is OK, values are saved here. If I submit my form, data is passed. But if a user wants to re-adjust filters in my form, previously applies filters are gone. Clear form.

Components are generated this way:

for (var filter in filters) {
    if (filters[filter]['type'] == 'select') {
        var values = {};
        for (var i in filters[filter]['data']) {
            var val = filters[filter]['data'][i]['val'];            
            var name = filters[filter]['data'][i]['name'];
            values['"' + val + '"'] = name;
        }
        formData[filters[filter]['name']] = { 'val': "", 'type': filters[filter]['type'] };
        formDataOrig[filters[filter]['name']] = { 'val': "", 'type': filters[filter]['type'] };
        tables_filters.push(
            <PickerField
                key={filters[filter]['name']}
                ref={filters[filter]['name']}
                label={filters[filter]['title']}
                options={
                    values
                }
                value={formData[filters[filter]['name']].val}
                containerStyle={
                    { alignItems: 'center', justifyContent: 'space-between' }
                }
                iconRight={
                    [<Icon
                        key={filters[filter]['name'] + 'icon'}
                        style={{ alignSelf: 'center', marginLeft: 10, marginRight: 10, marginTop: 4 }}
                        name='ios-arrow-down' size={20} />
                ]}
            />
        );
    }...