Заставьте реактив-выбор 2.0.0 <Async>работать с избыточной формой <Field> - PullRequest
Новая
       13

Заставьте реактив-выбор 2.0.0 <Async>работать с избыточной формой <Field>

0 голосов
/ 21 сентября 2018

react-select только что обновлен до 2.0.0, так что результаты Google на первых трех страницах касаются более старых версий, даже официального документа , и ни одна из них не помогла.

MyПоле выбора может отображать все параметры правильно, но форма с избыточностью не будет принимать значение, с предупреждением: Warning: A component is changing a controlled input of type hidden to be uncontrolled.

Интересно, что я здесь пропустил ...

Компонент формы: 

<Field
  name="residentialAddress"
  label = "Residential Address"
  type="select"
  component={AddressField}
  validate={required}
/>

Компонент 

export class AddressField extends Component {

    searchAddress = input => {
        let options = []

        return myPromise(input)
        .then(suggestions => {
                options = suggestions.map(suggestion => 
                    ({
                        label: suggestion.label,
                        data: suggestion.value
                    })
                )
                return options;             
            }
        ).catch(
            error => { 
                return options = [{ label: "Auto fetching failed, please enter your address manually", value: "", isDisabled: true }];
            }
        );
    };

    render() {
        const {
            input,
            label,
            meta: { touched, error },
            type
        } = this.props;

        return(
            <FormGroup>
                <ControlLabel>{label}</ControlLabel>
                <Async
                    {...input}
                    placeholder={label}
                    isClearable={true}   
                    getOptionValue={(option) => option.residentialAddress}
                    onChange = { value => input.onChange(value.data) }
                    loadOptions={this.searchAddress}                   
                />
                { touched && error && <span>{error}</span> }
            </FormGroup>
        )
    }

1 Ответ

0 голосов
/ 21 сентября 2018

Решение: просто удалите {...input} in <Async>.

В отличие от обычного настраиваемого компонента Field, в который нам нужно передать {input}, Async-компонентact-select, похоже, очень хорошо себя зарекомендовал и не требует никакого вмешательства.Кто-то может объяснить это более профессионально, возможно ...

Также стоит упомянуть тех, кто сталкивался с этим вопросом: loadOptions с обещанием, используемым как объект {options: options} в качестве возвращаемого типа.Теперь он меняется на массив (options, как в моем коде).Но я не нашел ни одного документа, в котором упоминается этот документ.

Надеюсь, это поможет.

...