javascript - React 组件自动绑定(bind)

Question

我是 React 和 javascript 新手，并尝试使用 moroshko 的组件 react-autosuggest ，但无法正确绑定(bind)事件处理程序。我正在用 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

或者上面的coffescript编译成下面的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);

自动建议组件最初显示正常，接受输入，并按顺序调用 onChange 和 onSuggestionsUpdateRequested 函数。状态已更新，但可能未附加到正确的组件。然后，自动建议将完全按照最初的方式重新绘制(即 value='')。

在定义 onChange 时用 fat-arrow => 替换 -> 会导致错误: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