reagieren-tagsinput & reagieren-Autosuggest & ES5

Question

Ich versuche react-tagsinput Arbeit mit react-autosuggest

zu machen, aber ich bekomme Fehler

ReferenceError: props is not defined

Mein Code ist

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

Was mache ich falsch ?

Answer 1

Versuchen Sie, AutocompleteRenderInput aus dem Renderbereich zu entfernen, damit es Teil Ihrer Komponente ist.

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