React component autobinding

Question

Я новичок в React и javascript и пытаюсь использовать компонент moroshko react-autosuggest, но не удается корректно привязать обработчики событий. Я пишу в coffeescript, но вставляю скомпилированный javascript тоже.

define [ 
    'jquery', 
    'react', 
    'reactdom', 
    'autosuggest' 
], (jQuery, React, ReactDOM, Autosuggest) -> 
    escapeRegexCharacters = (str) -> 
    str.replace /[.*+?^${}()|[\]\\]/g, '\\$&' 
    getSuggestions = (praxes, value) -> 
    if value == "" 
     return [] 
    val = escapeRegexCharacters(value.trim()) 
    regex = new RegExp('^' + val, 'i') 
    praxes.filter((prax) => regex.test(prax.species)) 
    getPraxSpecies = (prax) -> 
    prax.species 
    renderSpecies = (prax) -> 
    React.createElement("span", null, getPraxSpecies(prax)) 

    Species = React.createClass 
    getInitialState: -> 
     value: '' 
     suggestions: getSuggestions(@props.praxes, '') 

    onChange: (event, {newValue}) -> 
     @setState({value: newValue}) 

    onSuggestionsUpdateRequested: ({value}) -> 
     @setState {suggestions: getSuggestions(@props.praxes, value)} 

    render: -> 
     inputProps = 
     placeholder: "Choose a species" 
     value: '' 
     onChange: @onChange 
     autosuggest = React.createFactory Autosuggest 
     React.DOM.div {key: 'autosugg', className: 'praxis'}, 
     autosuggest { 
      key: 'autoSp', 
      suggestions: @state.suggestions, 
      onSuggestionsUpdateRequested: @onSuggestionsUpdateRequested, 
      getSuggestionValue: getPraxSpecies, 
      renderSuggestion: renderSpecies, 
      inputProps: inputProps 
     } 
    Species 

или CoffeeScript выше компилируется в JavaScript ниже:

(function() { 
    define(['jquery', 'react', 'reactdom', 'autosuggest'], function(jQuery, React, ReactDOM, Autosuggest) { 
    var Species, escapeRegexCharacters, getPraxSpecies, getSuggestions, renderSpecies; 
    escapeRegexCharacters = function(str) { 
     return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); 
    }; 
    getSuggestions = function(praxes, value) { 
     var regex, val; 
     if (value === "") { 
     return []; 
     } 
     val = escapeRegexCharacters(value.trim()); 
     regex = new RegExp('^' + val, 'i'); 
     return praxes.filter((function(_this) { 
     return function(prax) { 
      return regex.test(prax.species); 
     }; 
     })(this)); 
    }; 
    getPraxSpecies = function(prax) { 
     return prax.species; 
    }; 
    renderSpecies = function(prax) { 
     return React.createElement("span", null, getPraxSpecies(prax)); 
    }; 
    return Species = React.createClass({ 
     getInitialState: function() { 
     return { 
      value: '', 
      suggestions: getSuggestions(this.props.praxes, '') 
     }; 
     }, 
    onChange: function(event, _arg) { 
    var newValue; 
    newValue = _arg.newValue; 
    return this.setState({ 
     value: newValue 
    }); 
    }, 
     onSuggestionsUpdateRequested: function(_arg) { 
     var value; 
     value = _arg.value; 
     return this.setState({ 
      suggestions: getSuggestions(this.props.praxes, value) 
     }); 
     }, 
     render: function() { 
     var autosuggest, inputProps; 
     inputProps = { 
      placeholder: "Choose a species", 
      value: '', 
      onChange: this.onChange 
     }; 
     autosuggest = React.createFactory(Autosuggest); 
     console.log('this: ' + this); 
     return React.DOM.div({ 
      key: 'autosugg', 
      className: 'praxis' 
     }, autosuggest({ 
      key: 'autoSp', 
      suggestions: this.state.suggestions, 
      onSuggestionsUpdateRequested: this.onSuggestionsUpdateRequested, 
      getSuggestionValue: getPraxSpecies, 
      renderSuggestion: renderSpecies, 
      inputProps: inputProps 
     })); 
     } 
    }, Species); 
    }); 

}).call(this); 

The автозаполнение компонент отображает должным образом на начальном этапе, принимает входные данные, и вызывает OnChange и onSuggestionsUpdateRequested функции в таком порядке. Состояние обновляется, но, возможно, не привязывается к правильному компоненту. Автозагрузка затем перерисовывается точно так же, как изначально (т. Е. Значение = '').

Подставив жир стрелок => для -> в определении результатов OnChange в ошибке: Uncaught TypeError: _this.setState is not a function

Я также попытался использовать стиль кодирования, например moroshko без успеха. Ясно, что у меня что-то не хватает ...

Answer 1

Я думаю, проблема в вашем inputProps. Вы должны использовать this.state.value:

inputProps = 
    placeholder: "Choose a species" 
    value: '' 
    onChange: @onChange 

к:

inputProps = 
    placeholder: "Choose a species" 
    value: @state.value 
    onChange: @onChange