无法使用 Creatable react-select 显示值

Question

我正在使用 react-select 和 material-ui 制作一个外观和功能类似于 material 的自动完成组件。

我遵循了这里的基本设置

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。如果您输入 select 一个选项，您会看到它显示 selected 选项，但是如果您输入一个新选项并按回车键，它不会显示该选项，我正在尝试计算找出原因，对我在这里做错的事情提供一些帮助会非常有帮助

https://wmazc4.stackblitz.io

Answer 1

我认为这个错误是你的数据转换 id 到 value 与你的 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 属性来转换数据你可以从现场示例中找到更多信息

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

无法使用 Creatable react-select 显示值

Can't show a value with Creatable react-select

autocomplete

reactjs

react-select

material-ui