Form values drop to initial when show/hide components
IgorUsoltsev opened this issue · 0 comments
IgorUsoltsev commented
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} />
]}
/>
);
}...