react-tagsinput＆amp; react-autosuggest＆amp; ES5

Question

我尝试react-tagsinput使用react-autosuggest

但我收到错误

  

ReferenceError：未定义道具

我的代码是

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

我做错了什么？

Answer 1

尝试将autocompleteRenderInput移出渲染范围，使其成为组件的一部分。

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() {

},
autocompleteRenderInput: function() {

        var inputValue = (this.props.value && this.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}
            />
        );
    },
render: function() {