У меня есть файл конфигурации с некоторыми полями для создания элементов ввода внутри компонента. Я пытаюсь создать поле ввода 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
состоянию компонента.