olahol / react-tagsinput

Highly customizable React component for inputing tags.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

es5 and autosuggest issues

opened this issue · comments

I try to make integrate autosuggest with es5, but I get error props is not defined

My code is following

var AdminGroupDetails = createReactClass({
    getInitialState: function () {
      return {
        tags: []
      }
    },
    handleChange: function(tags) {
        this.setState({tags})
    },
    states: function() {
        return [
            {abbr: 'AL', name: 'Alabama'},
            {abbr: 'AK', name: 'Alaska'},
            {abbr: 'AZ', name: 'Arizona'},
          ]
    },
    onChange: function() {

    },
    inputProps: function() {
        return {
            placeholder: 'Type a programming language',
            value: this.state.value,
            onChange: this.onChange
        }
    },
    getSuggestionValue: function(suggestion) {
        return suggestion.name
    },
    renderSuggestion: function(suggestion) {
        return (
            <div>
              suggestion.name
            </div>
          )
    },
    onSuggestionsFetchRequested: function() {

    },
    onSuggestionsClearRequested: function() {

    },
    render: function() {
        function autocompleteRenderInput() {

            var inputValue = (props.value && props.value.trim().toLowerCase()) || ''
            var inputLength = inputValue.length

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

            return (
                <Autosuggest
                suggestions={suggestions}
                inputProps={this.inputProps}
                getSuggestionValue={this.getSuggestionValue}
                renderSuggestion={this.renderSuggestion}
                onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
                onSuggestionsClearRequested={this.onSuggestionsClearRequested}
                />
            );
        }

    return (
        <div className="well">
          <h1>Профиль</h1>
            <form>
              <div className="form-group">
                <label>Название</label>
                <input className="form-control" id="name" placeholder="Укажите ФИО"></input>
              </div>
              <div className="form-group">
                <label>Какой-то лейбл</label>
                <TagsInput renderInput={autocompleteRenderInput} value={this.state.tags} onChange={this.handleChange}/>
              </div>
             <button type="submit" className="btn btn-primary" onSubmit={this.submitHandler}>Сохранить</button>
           </form>
        </div>
      )
    }
})

What am I doing wrong ?

commented

This probably question that's better for Stack Overflow.