React-select2.00不起作用reactjs 16

时间:2018-06-25 16:57:27

标签: reactjs react-select

我正在尝试将React-select与新版本的reactjs16一起使用 当我阅读该文档并按照以下步骤操作时,您将看到以下代码,但是它不起作用,只是显示输入而不是选择。


另一件事是谁能帮助我在reactjs中找到更好的软件包供选择。

import React from 'react'
import Select from 'react-select';
import createClass from 'create-react-class';
import PropTypes from 'prop-types';

const STATES = require('./status');

var Selects = createClass({
    displayName: 'StatesField',
    propTypes: {
        label: PropTypes.string,
        searchable: PropTypes.bool,
    },
    getDefaultProps () {
        return {
            label: 'States:',
            searchable: true,
        };
    },
    getInitialState () {
        return {
            country: 'AU',
            disabled: false,
            searchable: this.props.searchable,
            selectValue: 'new-south-wales',
            clearable: true,
            rtl: false,
        };
    },
    clearValue (e) {
        this.select.setInputValue('');
    },
    switchCountry (e) {
        var newCountry = e.target.value;
        this.setState({
            country: newCountry,
            selectValue: null,
        });
    },
    updateValue (newValue) {
        this.setState({
            selectValue: newValue,
        });
    },
    focusStateSelect () {
        this.select.focus();
    },
    toggleCheckbox (e) {
        let newState = {};
        newState[e.target.name] = e.target.checked;
        this.setState(newState);
    },
    render () {
    var options = STATES[this.state.country];
    console.log(options)
        return (
            <div className="section">

      <Select
          className="portfolio select-box Select-value"
                    id="state-select"
                    ref={(ref) => { this.select = ref; }}
                    onBlurResetsInput={false}
                    onSelectResetsInput={false}
                    autoFocus
                    options={options}
                    simpleValue
                    clearable={this.state.clearable}
                    name="selected-state"
                    disabled={this.state.disabled}
                    value={this.state.selectValue}
                    onChange={this.updateValue}
                    rtl={this.state.rtl}
                    searchable={this.state.searchable}
        />
    </div>      
        );
    }
});
export default Selects

以下是我从react-select得到的结果 enter image description here

0 个答案:

没有答案