无法使用可创建的反应选择显示值

Question

我正在使用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

Answer 1

我认为错误在于您的数据转换 id 与您的 react-select 组件混淆

我通过您的代码的精确副本进行了演示（因为您的示例不起作用）

这是我的例子：https://codesandbox.io/s/p9j3xz843m

这里我用过

    inputProps={{
        classes,
        name: "react-select-single",
        instanceId: "react-select-single",
        simpleValue: true,
        options: colourOptions,
        valueKey: "id",
        labelKey: "label"
      }} 

发现我使用 valueKey 和 labelKey 道具来转换数据，您可以从现场示例中找到更多信息

希望这会对您有所帮助。如果您需要更多说明，请告诉我。