在reactjs中创建多选的错误

Question

嗨，我是reactjs的新手，我正在尝试在我的一个页面中添加多选功能。我没有得到任何错误，但在页面中获得正常的选择框。

import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import Input from '@material-ui/core/Input';
import Select from 'react-select';
import Typography from '@material-ui/core/Typography';
import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
import CancelIcon from '@material-ui/icons/Cancel';
import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
import ClearIcon from '@material-ui/icons/Clear';
import Chip from '@material-ui/core/Chip';
import MenuItem from '@material-ui/core/MenuItem';

const suggestions = [
    { label: 'Afghanistan' },
    { label: 'Aland Islands' },
    { label: 'Albania' },
    { label: 'Algeria' },
    { label: 'American Samoa' },
    { label: 'Andorra' },
    { label: 'Angola' },
    { label: 'Anguilla' },
    { label: 'Antarctica' },
    { label: 'Antigua and Barbuda' },
    { label: 'Argentina' },
    { label: 'Armenia' },
    { label: 'Aruba' },
    { label: 'Australia' },
    { label: 'Austria' },
    { label: 'Azerbaijan' },
    { label: 'Bahamas' },
    { label: 'Bahrain' },
    { label: 'Bangladesh' },
    { label: 'Barbados' },
    { label: 'Belarus' },
    { label: 'Belgium' },
    { label: 'Belize' },
    { label: 'Benin' },
    { label: 'Bermuda' },
    { label: 'Bhutan' },
    { label: 'Bolivia, Plurinational State of' },
    { label: 'Bonaire, Sint Eustatius and Saba' },
    { label: 'Bosnia and Herzegovina' },
    { label: 'Botswana' },
    { label: 'Bouvet Island' },
    { label: 'Brazil' },
    { label: 'British Indian Ocean Territory' },
    { label: 'Brunei Darussalam' }
].map(suggestion => ({
    value: suggestion.label,
    label: suggestion.label
}));

/**
* Option function.
* @param {object} props select options
* @returns {object} html instance
*/
function Option(props) {
    const {
        children,
        isFocused,
        isSelected,
        onFocus
    } = props;

    /**
    * SelectWrapped Component.
    * @param {object} event select options
    * @returns {object} html instance
    */
    const handleClick = event => {
        this.props.onSelect(this.props.option, event);
    };

    return (
        <MenuItem
            onFocus={onFocus}
            selected={isFocused}
            onClick={handleClick}
            component="div"
            style={{
                fontWeight: isSelected ? 500 : 400
            }}
        >
            {children}
        </MenuItem>
    );
}

Option.propTypes = {
    children: PropTypes.any,
    isFocused: PropTypes.bool,
    isSelected: PropTypes.bool,
    onFocus: PropTypes.func
};

Option.defaultProps = {
    children: {},
    isFocused: false,
    isSelected: false,
    onFocus: () => { }
};

/**
* SelectWrapped Component.
* @param {object} props select options
* @returns {object} html instance
*/
function SelectWrapped(props) {
    const { classes, ...other } = props;

    return (
        <Select
            optionComponent={Option}
            noResultsText={<Typography>No results found</Typography>}
            arrowRenderer={arrowProps => {
                return arrowProps.isOpen ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />;
            }}
            clearRenderer={() => <ClearIcon />}
            valueComponent={valueProps => {
                const { value, children, onRemove } = valueProps;

                const onDelete = event => {
                    event.preventDefault();
                    event.stopPropagation();
                    onRemove(value);
                };

                if (onRemove) {
                    return (
                        <Chip
                            tabIndex={-1}
                            label={children}
                            className={classes.chip}
                            deleteIcon={<CancelIcon onTouchEnd={onDelete} />}
                            onDelete={onDelete}
                        />
                    );
                }
                return <div className="Select-value">{children}</div>;
            }}
            {...other}
        />
    );
}

/**
* Common reference component
*/
class Login extends React.Component {
    state = {
        multi: null
    };

    /**
    * Common reference component
    * @param {any} multi something i dont know
    * @returns {void}
    */
    handleChangeMulti = multi => {
        this.setState({
            multi
        });
    };

    /**
    * Render Component.
    * @returns {object} html instance
    */
    render() {
        const { classes } = this.props;
        const { multi } = this.state;

        return (
            <div className="row">
                <div className="col-md-6">
                    test
                </div>
                <div className="col-md-6">
                    <Input
                        fullWidth
                        inputComponent={SelectWrapped}
                        inputProps={{
                            classes,
                            value: multi,
                            multi: true,
                            onChange: this.handleChangeMulti,
                            placeholder: 'Select multi-value…',
                            instanceId: 'react-select-chip',
                            id: 'react-select-chip',
                            name: 'react-select-chip',
                            simpleValue: true,
                            options: suggestions
                        }}
                    />
                </div>
            </div>

        );
    }
}

Login.propTypes = {
    classes: PropTypes.object.isRequired
};

Login.defaultProps = {
};

const mapStateToProps = (state) => {
    return {};
};

export default connect(mapStateToProps)(Login);

必须在道具中进行一些设置，但无法调试代码。实际的multiselect应如下所示：

http://instructure-react.github.io/react-tokeninput/

Answer 1

在select组件中添加isMulti道具，如下所示：

   <Select  
            //you need this option for select more then one option.
            isMulti={true}
            optionComponent={Option}
            noResultsText={<Typography>No results found</Typography>}
            arrowRenderer={arrowProps => {
                return arrowProps.isOpen ? <ArrowDropUpIcon /> : <ArrowDropDownIcon />;
            }}
            clearRenderer={() => <ClearIcon />}
            valueComponent={valueProps => {
                const { value, children, onRemove } = valueProps;

                const onDelete = event => {
                    event.preventDefault();
                    event.stopPropagation();
                    onRemove(value);
                };

                if (onRemove) {
                    return (
                        <Chip
                            tabIndex={-1}
                            label={children}
                            className={classes.chip}
                            deleteIcon={<CancelIcon onTouchEnd={onDelete} />}
                            onDelete={onDelete}
                        />
                    );
                }
                return <div className="Select-value">{children}</div>;
            }}
            {...other}
        />