如何在JSX中使用自动建议代码实现反应标签输入控制？

Question

我正在尝试通过以下链接实现带有taggedit控件的自动建议输入

https://github.com/olahol/react-tagsinput#example

我已尽力并将代码转换为Jsx格式，如下所示

'use strict';

/*LIBRARIES*/
var React = require('react');
var ReactDOM = require('react-dom');
var TagsInput = require('react-tagsinput');
var TagCss = require('react-tagsinput/react-tagsinput.css')
    //var CustomScroll = require('react-custom-scroll');
    //var CustomScrollCSS = require('react-custom-scroll/src/main/customScroll.css');
var ReactAutoSuggest = require('react-autosuggest');
var ReactAutoSize = require('react-input-autosize');

var TaggedInput = React.createClass({
            getInitialState: function() {
                return ({
                    tags: []
                });
            },
            handleChange(tags) {

                this.setState({
                    tags
                });
            },
            states: function() {
                return ([{
                    abbr: "AL",
                    name: "Alabama"
                }, {
                    abbr: "AK",
                    name: "Alaska"
                }, {
                    abbr: "AZ",
                    name: "Arizona"
                }]);
            },
            render: function() {

                const autocompleteRenderInput = (props) => {
                    const addTag = props;
                    const handleOnChange = (e, method) => {
                        if (method === 'enter') {
                            e.preventDefault();
                        } else {
                            props.onChange(e);
                        }
                    }

                    console.log(this.states());

                    const inputValue = (props.value && props.value.trim().toLowerCase()) || ""
                    const inputLength = inputValue.length

                    var tags = this.state;
                    var suggestions = this.states().filter((state) => {
                        return state.name.toLowerCase().slice(0, inputLength) === inputValue
                    });

                    var onSuggestionSelected = function(event, suggestion) {
                        props.addTag(suggestion.name);
                    }
                    var shouldRenderSuggestions = function(value) {
                        return value.trim().length > 2;
                    }
                    var getSuggestionValue = function(suggestion) {
                        return suggestion.name;
                    }

                    var renderSuggestion = function(suggestion) {
                        return <span > {
                            suggestion.name
                        } < /span>;
                    }
                    const inputProps = {
                        value, // usually comes from the application state
                        handleOnChange, // called every time the input value changes
                        onBlur, // called when the input field loses focus, e.g. when user presses Tab
                        type: 'search',
                        placeholder: 'Enter city or postcode'
                    };
                    return ( <
                        ReactAutoSuggest ref = {
                            props.ref
                        }
                        suggestions = {
                            suggestions
                        }
                        shouldRenderSuggestions = {
                            shouldRenderSuggestions
                        }
                        getSuggestionValue = {
                            getSuggestionValue
                        }
                        renderSuggestion = {
                            renderSuggestion
                        }
                        inputProps = {
                            inputProps
                        } > < /ReactAutoSuggest>)
                    }

                    return ( < TagsInput renderInput = {
                            autocompleteRenderInput
                        }
                        value = {
                            this.state.tags
                        }
                        onChange = {
                            this.handleChange
                        }
                        />);


                    }
                });

            ReactDOM.render( < TaggedInput / > , document.getElementById('divSharedLeadContainer'));

并且无法输出。

有人可以用JSX代码提供样本，这将非常有帮助。