Проблема:
Я пытаюсь обновить значение поля избыточной формы на основе некоторого выбора на другом экране, где находится поле.
Что я делаю:
1) Показать форму с TouchableOpacity. Ему придан стиль раскрывающегося списка (это registeredField)
2) Нажмите на эту кнопку, и вы будете перенаправлены в список
3) Нажмите на один элемент из списка
4) Вы перенаправлены обратно
5) Заполнитель должен измениться на выбор, сделанный на предыдущем экране.
Что происходит:
Если я нажму на раскрывающийся список (кнопка сенсорной непрозрачности) напрямую и вернусь, значение не обновится. Но как только я меняю ввод для любого из других полей - метка сразу меняется. То же самое также работает, если у меня есть что-то в одном из других входов, а затем я делаю выбор - метка меняется, как и ожидалось.
Моя попытка:
Чтобы показать метку, я подготавливаю объект initialValues и передаю его компоненту, который отображает форму, чтобы правильно отображать метку:
Компонент поля:
....
<TouchableOpacity onPress={openPicker}>
<Text>{groupName || 'Select Group'}</Text>
</TouchableOpacity>
....
Поле формы в reduxForm связанном компоненте:
<Field
name="groupName"
placeholder="Group"
groupPicker // to render the picker or a normal input box
groupName={groupName} // the value used as placeholder
openGroupPicker={openGroupPicker}
component={FormInput}
/>
....
const connectedDriverForm = reduxForm({
form: 'driverForm',
validate,
enableReinitialize: true,
})(DriverForm);
Форма внутри контейнера, куда передается реквизит initialvalues:
const {
subhaulerPhone,
subhaulerEmail,
groupName,
} = this.props;
const initialValues = {
subhaulerPhone,
subhaulerEmail,
groupName,
};
// within render()
<DriverForm
initialValues={initialValues}
openGroupPicker={this.handleOpenGroupPicker}
onDriverFormSubmit={this.handleDriverFormSubmit}
onCancel={this.closeDriverForm}
/>
Я попытался подключиться к событию change избыточной формы:
export default connect(
mapStateToProps,
{
...mapDispatchToProps,
saveGroupName: groupName => change('driverForm', 'groupName', groupName),
},
)(UserManagementForm);
Я использовал реквизит initialValues, чтобы средство выбора отображало правильную метку при выборе, а также правильно загружало и сохраняло форму при каждом изменении экрана.
У меня есть действие для сохранения значений формы и установки имени группы:
import { pathOr } from 'ramda';
import { createStructuredSelector } from 'reselect';
import {
initialState,
SAVE_FORM_VALUES,
SET_GROUP_NAME,
CLEAR_GROUP_NAME,
CLEAR_FORM_VALUES,
} from './usermanagementform.constants';
export const userManagementFormSelector = createStructuredSelector({
subhaulerPhone: pathOr('', ['userManagementForm', 'subhaulerPhone']),
subhaulerEmail: pathOr('', ['userManagementForm', 'subhaulerEmail']),
groupName: pathOr('', ['userManagementForm', 'groupName']),
subhaulerFormValues: pathOr({}, ['form', 'driverForm', 'values']),
});
export const userManagementFormReducer = (state = initialState, action) => {
switch (action.type) {
case SAVE_FORM_VALUES:
return {
...state,
...action.data,
};
case CLEAR_FORM_VALUES:
return {
subhaulerPhone: '',
subhaulerEmail: '',
groupName: '',
};
case SET_GROUP_NAME:
return {
...state,
groupName: action.groupName,
};
case CLEAR_GROUP_NAME:
return {
...state,
groupName: '',
};
default:
return state;
}
};
Все мои попытки пока тщетны. Это крайний случай, и я не могу понять, почему это не работает или что не работает.
Любая помощь будет оценена.
Спасибо.
Используемый ресурс:
