React-select AsyncSelect loadOptions через React.cloneElement

У меня есть файл конфигурации с некоторыми полями для создания элементов ввода внутри компонента. Я пытаюсь создать поле ввода AsyncSelect и назначить ему loadOptions prop через конфигурацию. Проблема в том, что функция никогда не вызывается. Вот объект в конфигурации для генерации ввода AsyncSelect:

   {
        key: 'cityCode',
        value: (customer, borrower) => ({
            label: borrower.cityName,
            value: borrower.cityCode
        }),
        text: 'city',
        disabled: falseFn,
        input: REACT_ASYNC_SELECT_INPUT,
        props: (borrower, component) => ({
            inputValue: component.state.cityName,
            loadOptions: () => {
                return CitiesService.find(component.state.cityName || '')
                    .then(records => records.map(record => ({
                        label: record.name,
                        value: record.code
                    })));
            },
            onInputChange: cityName => {
              component.setState({
                  cityName
              });
            },
            onChange: ({label, value}, {action}) => {
                if (action === 'clear') {
                    component.updateCustomer(component.props.fieldKey + 'cityName', '');
                    component.updateCustomer(component.props.fieldKey + 'cityCode', -1);
                } else {
                    component.updateCustomer(component.props.fieldKey + 'cityName', label);
                    component.updateCustomer(component.props.fieldKey + 'cityCode', value);
                }
            }
        }),
        render: trueFn
    },

Вот часть рендеринга компонента, использующая файл конфигурации для рендеринга различных входных данных:

<div className="values">
                {
                    BorrowerInfoConfig().map(field => {
                        if (field.render(borrower)) {
                            const kebabCaseKey = _.kebabCase(field.key);
                            const fieldElement = React.cloneElement(field.input, {
                                className: `${kebabCaseKey}-input`,
                                value: field.value ? field.value(customer, borrower) : _.get(borrower, field.key),
                                onChange: e => {
                                    let value = e.target.value;
                                    if (field.options) {
                                        value = Number(value);
                                    }
                                    this.updateCustomer(fieldKey + field.key, value);
                                },
                                disabled: field.disabled(borrower),
                                ...field.props(borrower, this)
                            }, field.options ? Object.keys(field.options).map(option => <option
                                key={option}
                                className={`${kebabCaseKey}-option`}
                                value={option}>
                                {field.options[option]}
                            </option>) : null);
                            return <div key={field.key} className={`value ${kebabCaseKey}`}>
                                <span>{field.text}</span>
                                {fieldElement}
                            </div>;
                        }
                        return null;
                    })
                }
            </div>

Как видите, я использую React.cloneElement, чтобы клонировать ввод из файла конфигурации и назначать ему новые свойства, в зависимости от того, что я получаю из файла конфигурации, в данном случае 4 настраиваемых свойства: inputValue loadOptions onInputChange onChange

Моя проблема в том, что loadOptions никогда не вызывается, есть идеи, почему? С другой стороны, inputValue правильно назначается cityName состоянию компонента.


person Jorayen    schedule 25.08.2019    source источник


Ответы (1)


Моя проблема заключалась в том, что REACT_ASYNC_SELECT_INPUT ссылается на нормальные Select, а не на Select.Async.

person Jorayen    schedule 25.08.2019