Question

handleChange未定义，当rum = n页面发生反应时显示此内容

function ApplicationCategories() {
      const options = ["Africa", "America", "Asia", "Europe"];
      handleChange = (event, value) => {
        console.log(value);
      };
      return (
        <SecureLayout>
            <ReactSelectMaterialUi
              style={{ width: 100 }}
              value="Europe"
              options={options}
              onChange={this.handleChange}
            />
        </SecureLayout>
      );
    }

Answer 1

onChange={handleChange}不是onChange={this.handleChange}，因为您要传递函数主体中定义的函数的引用。当您要访问类属性时，使用this.something。

handleChange = (event, value) => {
   console.log(value);
};

以上代码段用于在类中声明方法。

由于要在函数体内声明函数，因此应该

const handleChange = (event, value) => {
   console.log(value);
};

Answer 2

使用react函数时，需要使用const或let声明内部函数。然后，您不需要使用它。不再是一堂课了。

function ApplicationCategories() {
      const options = ["Africa", "America", "Asia", "Europe"];
      const handleChange = (event, value) => {
        console.log(value);
      };
      return (
        <SecureLayout>
            <ReactSelectMaterialUi
              style={{ width: 100 }}
              value="Europe"
              options={options}
              onChange={handleChange}
            />
        </SecureLayout>
      );
    }

Answer 3

您正在使用functional component。也称为stateless component。

因此，method应该使用const/let来定义。而且在通话时请勿使用this。

function ApplicationCategories() {
      const options = ["Africa", "America", "Asia", "Europe"];
      
      const handleChange = (event, value) => {
        console.log(value);
      };

      return (
        <SecureLayout>
            <ReactSelectMaterialUi
              style={{ width: 100 }}
              value="Europe"
              options={options}
              onChange={handleChange}
            />
        </SecureLayout>
      );
    }

未定义handleChange在react中没有no-undef

3 个答案: