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

autosuggest组件最初显示正确，接受输入，并按顺序调用onChange和onSuggestionsUpdateRequested函数。状态已更新，但可能未附加到正确的组件。然后autosuggest完全重新初始化（即value =''）。

代替fat-arrow =＆gt; for - ＆gt;在定义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

反应组件自动绑定

1 个答案: