React component autobinding

Question

나는 React와 javascript에 익숙하며 moroshko의 구성 요소 인 react-autosuggest을 사용하려하지만 이벤트 처리기를 올바로 바인딩하지 못했습니다. coffeescript로 쓰고 있지만 컴파일 된 자바 스크립트도 붙여 넣습니다.

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 

커피 스크립트 나 자바 스크립트 이하로 컴파일 이상 : 초기에 적절

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

자동 제안 컴포넌트 디스플레이는 입력을 접수하고, 그 순서의 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