react-通过React.cloneElement选择AsyncSelect loadOptions

Question

我有一个配置文件，其中包含一些用于在组件中生成输入元素的字段。我正在尝试生成一个AsyncSelect输入字段，并通过配置为它分配loadOptions属性。问题是这个函数永远不会被调用。下面是配置中用于生成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状态。

Answer 1

我的问题是REACT_ASYNC_SELECT_INPUT引用的是普通的Select而不是Select.Async。