React 组件自动绑定

Posted 2023-03-03

【中文标题】React 组件自动绑定

【英文标题】：React component autobinding

【发布时间】：2016-11-16 14:02:37

【问题描述】：

我是 React 和 javascript 的新手，尝试使用 moroshko 的组件 react-autosuggest，但未能正确绑定事件处理程序。我正在使用咖啡脚本编写，但也会粘贴已编译的 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);

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

在定义 onChange 时将 fat-arrow => 替换为 -> 会导致错误：Uncaught TypeError: _this.setState is not a function

我也尝试过使用 moroshko 示例的编码风格，但没有成功。显然，我错过了一些东西......

【问题讨论】：

我没有看到任何 JavaScript。看起来您在两个位置都粘贴了咖啡脚本。

谢谢。是的。用 js 替换了第二个 cs。

是的，但我不确定您发布的 js 是否与 CoffeeScript 匹配。 onChange 的 JS 看起来像你用的胖箭头？你绝对不想要那个

推荐阅读：blog.andrewray.me/react-es6-autobinding-and-createclass

另一个错误，现已修复。 -> onChange 是 onChange: function(event, _arg) var newValue;新值 = _arg.新值；返回 this.setState( value: newValue ); ,

【参考方案1】：

我认为问题出在您的inputProps 上。你需要使用this.state.value:

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

到：

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

【讨论】：

谢谢你，布兰登。这解决了它。非常感谢。