Автозаполнение пользовательского интерфейса материала с помощью response-select для получения базы данных при каждом поиске

В настоящее время я использую автозаполнение Material ui v1.4.3. В пользовательском интерфейсе материала указано, что это автозаполнение интегрировано с response-select.

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

У кого-нибудь был опыт по этому поводу? Потому что статический метод из этого кода не позволяет мне вызывать любую функцию редуктора, переданную от моего родительского компонента.

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

function NoOptionsMessage(props) {
return (
    <Typography
        color = "textSecondary"
        className = {props.selectProps.classes.noOptionsMessage}
        {...props.innerProps}
    >
        {props.children}
    </Typography>
);
}

function inputComponent({ inputRef, ...props }) {
    return <div ref = {inputRef} {...props} />;
}

function Control(props) {
////console.dir(props.selectProps.inputValue); i am able to get the user input here
// so i was thinking i can call my reducer somewhere here but no luck
// my function is passed from my parent component so i wish to call this.props.theFunction here
return (
    <TextField
        fullWidth
        InputProps = {{
            inputComponent,
            inputProps: {
                className: props.selectProps.classes.input,
                ref: props.innerRef,
                children: props.children,
                ...props.innerProps,
            },
        }}
        onChange = {(e) => IntegrationReactSelect.testing(e)}
    />
);
}

function Option(props) {
return (
    <MenuItem
        buttonRef = {props.innerRef}
        selected = {props.isFocused}
        component = "div"
        style = {{
            fontWeight: props.isSelected ? 500 : 400,
        }}
        {...props.innerProps}
    >
        {props.children}
    </MenuItem>
);
}

function Placeholder(props) {
return (
    <Typography
        color = "textSecondary"
        className = {props.selectProps.classes.placeholder}
        {...props.innerProps}
    >
        {props.children}
    </Typography>
);
}

function SingleValue(props) {
return (
    <Typography className = {props.selectProps.classes.singleValue} {...props.innerProps}>
        {props.children}
    </Typography>
);
}

function ValueContainer(props) {
return <div className = {props.selectProps.classes.valueContainer}>{props.children}</div>;
}

function MultiValue(props) {
return (
    <Chip
        tabIndex = {-1}
        label = {props.children}
        className = {classNames(props.selectProps.classes.chip, {
            [props.selectProps.classes.chipFocused]: props.isFocused,
        })}
        onDelete = {event => {
            props.removeProps.onClick();
            props.removeProps.onMouseDown(event);
        }}
    />
);
}

const components = {
Option,
Control,
NoOptionsMessage,
Placeholder,
SingleValue,
MultiValue,
ValueContainer
};

class IntegrationReactSelect extends React.Component {
state = {
    single: null,
    multi: null,
};

handleChangeEvent = name => value => {
    this.setState({
        [name]: value,
    });
    this.props.getSelectMultipleValue(value);
};

render() {
    const { classes } = this.props;
    return (
        <div className = {classes.root}>
            <Select
                classes = {classes}
                options = {this.props.theUserFromParentComponent}
                components = {components}
                value = {this.state.multi}
                onChange = {this.handleChangeEvent('multi')}
                placeholder = {this.props.reactSelectName}
                isMulti
            />
        </div>
    );
}
}