自定义 SingleValue 和 Option react-select - 选项显示，但 SingleValue 不显示

Question

I'm trying to create a custom Select using react-select. I want to create a custom Option and SingleValue. The custom Option renders, but SingleValue doesn't. The single value (selected value) displays as per the default styling.

Here's my code,

const Option = (props) => {
    const { data, innerProps, innerRef, cx, getStyles, className } = props;
    const [hover, setHover] = useState(false);

    return (
        <div ref={innerRef} {...innerProps}
            style={getStyles('option', props)}
            className={cx(
                {
                    option: true,
                },
                className
            )}
        >
            <div style={{ marginLeft: 10}} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}>
            <p> {data.label} </p>
                { hover ? <Alert bsStyle="success" style={{ opacity: 0.8 }}>
                    <p> {data.description} </p>
                  </Alert> : null}
            </div>
        </div>
    )
};

I have tried SingleValue like this,

const SingleValue = ({
    cx,
    getStyles,
    selectProps,
    data,
    isDisabled,
    className,
    ...props
}) => {
    console.log(props);
    return (
        <div
            className={cx(
                emotionCss(getStyles("singleValue", props)),
                {
                    "single-value": true,
                    "single-value--is-disabled": isDisabled
                },
                className
            )}
        >
       <div>{data.label}</div>
            <div style={{ fontSize: "10px" }}>{data.description}</div>
        </div>
    );
};

And this,

const SingleValue = props => (
    <components.SingleValue {...props}>
        {props.data.description}
    </components.SingleValue>
);

I render it like this,

<Select
   id="color"
   options={this.props.options}
   isMulti={true}
   onChange={this.handleChange}
   onBlur={this.handleBlur}
   value={this.props.value}
   components={{ Option, SingleValue }}
/>

Both ways of SingleValue don't work. I have tried to just include SingleValue in components, but that also does't work. Could anyone please help? Thanks!

Answer 1

I had the same problem and I solved it using components.ValueContainer instead of components.SingleValue. In my case, I used react-select to have an icon select component.

This is my constructor:

    constructor(props) {
        super(props);
        this.state = {
        icons: [{label: "temperature-low", value: "temperature-low", icon: "temperature-low"}, {label: "utensils", value: "utensils", icon: "utensils"}, {label: "venus", value: "venus", icon: "venus"}, {label: "volume-up", value: "volume-up", icon: "volume-up"}, {label: "wifi", value: "wifi", icon: "wifi"}],
        inputValueIcon: "",

        };

    this.handleChangeIcon = this.handleChangeIcon.bind(this);
   }

This is my handleChange function:

handleChangeIcon(selectedItem) {
    this.setState({
        inputValueIcon: selectedItem
    })
}

And finally, my render function:

render() {
    const { Option, ValueOption, ValueContainer } = components;
    const IconOption = (props) => (
        <Option {...props}>
            <MDBIcon icon={props.data.label} />
        </Option>
    );

    const ValueOptionLabel = (props) => (
        <ValueContainer {...props}>
            <MDBIcon icon={props.data.label} />
        </ValueContainer>
    );

    return(
        <Fragment>
          <Select
          placeholder="Select an icon"
          value={this.state.inputValueIcon}
          onChange={ this.handleChangeIcon }
          components={{ Option: IconOption, SingleValue: ValueOptionLabel }}
          options={ this.state.icons }
          />              
        </Fragment>
    );
}

It's not the best solution, but it works :)