Почему эта инициализация избыточной формы не работает сact-select Select? - PullRequest
0 голосов
/ 09 мая 2019

Я работал над избыточной / неизменной формой.Форма содержит поле множественного выбора.Для поля выбора я использовал 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

Результат: Outcome

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...