React 组件不识别函数？

Question

我在使用 react.js 方面还很陌生。但我认为有了文档，一切都应该成为可能，对吧？错了。

按照组件的文档结构，我正在尝试构建过滤器组件。这是我的代码：

import React from "react";
import ReactDOM from "react-dom";

class FilterBar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      activeFilters: "",
      availableAttributes: []
    };
  }

  componentDidMount() {
    $.ajax("/activeFilters", {
      success: function(e) {
        this.setActiveFilter(e);
      },

      error: function(e) {
        alert(e);
      }
    });
  }

  componentWillUnmount() {}

  setActiveFilter(value) {
    this.setstate({
      activeFilters: value
    });
  }

  render() {
    return (
      <div id="auto_banner" className="inline_block col-sm-3 col-xs-12">
        <div id="toggle_filterBody" className="text-left col-xs-5 col-md-2">
          <span>
            <img src="img/filter2.png" />
          </span>
          <span>Toggle Filter</span>
        </div>

        <div id="Quick_Filter">
          <h3>Smart Filter</h3>
          <p>
            Begin searching through hundreds of vehicles quickly with this easy
            to use tool.
          </p>

          <hr />

          <form name="quick_filter" encType="application/x-www-form-urlencoded">
            <div id="year_range">
              <span className="tag">Year Range</span>

              <div>
                <input
                  className="col-xs-5 year_range"
                  type="text"
                  name="min-year"
                  value=""
                  placeholder="MIN: yyyy"
                />
                to
                <input
                  className="col-xs-5 year_range"
                  type="text"
                  name="max-year"
                  value=""
                  placeholder="MAX: yyyy"
                />
              </div>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

if (document.getElementById("InventoryDisplay")) {
  ReactDOM.render(document.getElementById("FilterBar"));
  ReactDOM.render("ok", document.getElementById("InventoryDisplay"));
}

现在，当我刷新浏览器时，我收到一条错误消息，指出函数 setActiveFilter 无法识别。为什么？

Answer 1

问题是 this 将引用一个匿名函数，而不是您创建的 React 对象：

$.ajax('/activeFilters',{    
    success: function(e){

        this.setActiveFilter(e);
    },

    error:function(e){
        alert(e);
    }
});

如果你可以使用箭头函数试试：

constructor(props) {
    super(props);
    this.state = {
        activeFilters: '',
        availableAttributes:[]
    };

    this.setActiveFilter = this.setActiveFilter.bind(this); // this will make setActiveFilter be called with scope of your component object.
}

componentDidMount() {    
    $.ajax('/activeFilters',{    
        success: (e) => {    
            this.setActiveFilter(e);
        },

        error:function(e){
            alert(e);
        }
    });
}

Answer 2

目前您正在全局范围内调用 setActiveFilter，而不是在当前组件范围内。你需要调用当前作用域的函数，例如：

this.setActiveFilter(e);

在 ComponentDidMount

中编写的 ajax 调用成功回调

Answer 3

你必须在你的构造函数中绑定它

this.setActiveFilter = this.setActiveFilter.bind(this);

我很确定它会有所帮助 ;)

React 组件不识别函数？

React component don't recognize function?

reactjs

laravel-mix