无法使用可创建的react select显示值

我在用 react-select 随着 material-ui 使自动完成组件看起来和功能与材质组件相似。

我遵循了这里的基本设置

https://material-ui.com/demos/autocomplete/

然后不得不按照我们的API处理的方式调整我的设置,这一切都很好,但现在我正试图允许用户创建一个新选项,我似乎无法让它重新显示选项。

这是组件原样

import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import styles from "./styles";
import MenuItem from '@material-ui/core/MenuItem';
import Select from 'react-select';
import 'react-select/dist/react-select.css';
import Typography from '@material-ui/core/Typography';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
import Input from '@material-ui/core/Input';
import LinearProgress from '@material-ui/core/LinearProgress';
import classNames from 'classnames';

class Option extends React.Component {
  handleClick = event => {
    this.props.onSelect(this.props.option, event);
  };

  render() {
    const { children, isFocused, isSelected, onFocus } = this.props;
    return (
      <MenuItem
        onFocus={onFocus}
        selected={isFocused}
        disabled={isSelected}
        onClick={this.handleClick}
        component="div"
        style={{
          fontWeight: isSelected ? 500 : 400,
        }}
      >
        {children}
        {children === 'LOADING...' &&
          <LinearProgress style={{ position: 'absolute',width: '100%',bottom: '0',left: '0',height: '2px', }} />
        }
      </MenuItem>
    );
  }
}

class SelectWrapped extends Component {
  render() {
    const { classes, ...other } = this.props;
    return (
      <Select
        optionComponent={Option}
        noResultsText={<Typography>{'No results found'}</Typography>}
        clearRenderer={() => {}}
        arrowRenderer={arrowProps => {
          return arrowProps.isOpen ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />;
        }}
        valueComponent={valueProps => {
          const { children } = valueProps;
          console.log(children)
          return <div className="Select-value">{children}</div>;
        }}
        {...other}
      />
    );
  }
}

class SelectCreatable extends Component {
  render() {
    const { classes, ...other } = this.props;
    console.log(this.props)
    return (
      <Select.Creatable
        optionComponent={Option}
        noResultsText={<Typography>{'No results found'}</Typography>}
        clearRenderer={() => {}}
        arrowRenderer={arrowProps => {
          return arrowProps.isOpen ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />;
        }}
        valueComponent={valueProps => {
          const { children } = valueProps;
          return <div className="Select-value">{children}</div>;
        }}
        {...other}
      />
    );
  }
}

class AutoCompleteComponent extends Component {
  state = {
    value: null,
  };
  handleChange = value => {
    this.setState({ value: value })
    const foundSuggestion = this.props.suggestions.find((s) => s.id === value);
    if (this.props.creatable) {
      this.props.onChange(foundSuggestion || {
        [this.props.labelPropName]: value
      })
    } else {
      this.props.onChange(foundSuggestion)
    }
  }
  onChange = value => {
    this.props.onChange(this.props.suggestions.find((s) => s.id === value))
  };
  render() {
    const { classes, labelPropName, creatable } = this.props;
    const suggestions = this.props.suggestions.map(suggestion => ({
      value: suggestion.id,
      label: this.props.labelFunction(suggestion)
    }))
    return (
      <div className={classNames(classes.root,this.props.className)}>
        <Input
          fullWidth
          inputComponent={creatable ? SelectCreatable : SelectWrapped}
          value={this.state.value}
          onChange={(value) => this.props.showValue ? this.handleChange(value) : this.onChange(value)}
          placeholder={this.props.placeholder}
          classes={{
            input: classes.input,
            ...this.props.InputClasses
          }}
          inputProps={{
            classes,
            simpleValue: true,
            options: suggestions
          }}
        />
      </div>
    );
  }
}

export default withStyles(styles, { withTheme: true })(AutoCompleteComponent);

我用一个运行示例和一些选项设置了一个stackblitz。如果您键入并选择一个选项,您会看到它显示选定的选项,但如果您键入一个新选项并按Enter键,它不会显示该选项,我正试图找出原因,关于我在这里所做的错误的一些帮助将非常有用。

https://wmazc4.stackblitz.io