Пользовательские SingleValue и Option реагировать на выбор - опция отображается, но SingleValue не отображается - PullRequest
Новая
       5

Пользовательские SingleValue и Option реагировать на выбор - опция отображается, но SingleValue не отображается

0 голосов
/ 19 февраля 2020

Я пытаюсь создать пользовательский выбор, используя реагировать на выбор. Я хочу создать пользовательский вариант и SingleValue. Пользовательский параметр отображается, а SingleValue - нет. Одно значение (выбранное значение) отображается в соответствии со стилем по умолчанию.

Вот мой код, 

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>
    )
};

Я пробовал SingleValue, как это, 

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>
    );
};

И this, 

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

Я представляю это так: 

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

Оба способа SingleValue не работают. Я пытался просто включить SingleValue в компоненты, но это также не работает. Может ли кто-нибудь помочь, пожалуйста? Спасибо!

1 Ответ

1 голос
/ 04 марта 2020

У меня была та же проблема, и я решил ее с помощью компонентов. Значение компонента вместо компонентов. Одно значение. В моем случае я использовал response-select, чтобы иметь компонент выбора значка.

Это мой конструктор: 

    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);
   }

Это моя функция handleChange: 

handleChangeIcon(selectedItem) {
    this.setState({
        inputValueIcon: selectedItem
    })
}
* 1008 И, наконец, моя функция рендеринга: 
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>
    );
}

Это не лучшее решение, но оно работает:)

...