Я работал над избыточной / неизменной формой.Форма содержит поле множественного выбора.Для поля выбора я использовал response-select и передал поле выбора как компонент в поле приставки / неизменяемости.При точном выборе его и передаче выбранном множественном значении в избыточном хранилище.Но при инициализации формы все поля работают, кроме этого поля множественного выбора.Я установил некоторое демонстрационное значение для формы для инициализации.Поле выбора показывает пустой крестик (x), но не метку.
Исходные значения передаются отсюда
const initialValues = {
name: 'saha',
targets: [{ label: 'saha', value: 8 }],
};
class Groups extends Component {
render() {
return (
<NewGroup initialValues={initialValues} />
);
}
}
Код для формы (NewGroup.js)
class NewGroup extends Component {
render() {
return (
<form onSubmit={handleSubmit(onFormSubmit)}>
<FormInput name="name" label="Name" />
<FormSelect name="targets" label="Target" options={targets}/>
</form>
);
}
}
export default compose(
reduxForm({
form: 'groupForm',
enableReinitialize: true,
})
)(NewGroup);
Код для поля выбора (FormSelect.js)
renderField = field => {
const { input, meta, options } = field;
const reactSelectOptions = options.map(option => ({
value: option.get('id'),
label: option.get('name'),
}));
return (
<Select
{...input}
classNamePrefix="multivalue"
closeMenuOnSelect={false}
components={makeAnimated()}
onChange={value => input.onChange(value)}
onBlur={() => input.onBlur(input.value)}
options={reactSelectOptions}
styles={customStyle}
isMulti
/>
);
};
render() {
const { name, label, require, options } = this.props;
return (
<Field
name={name}
component={this.renderField}
label={label}
options={options}
validate={require ? [required] : []}
/>
);
}
Ожидаемый: ![Expected](https://i.stack.imgur.com/fB3PA.png)
Результат: ![Outcome](https://i.stack.imgur.com/CwgQL.png)