反应中未定义handleChange no-undef

Question

handleChange 未定义 no-undef 显示此当 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}因为您想传递 function 正文中定义的 function 的引用。 this.something在您想要访问 class 属性时使用。

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

上面的代码片段用于在 class 中声明方法。

因为你想在函数体内声明一个 function 它应该是

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

Answer 2

当您使用反应函数时，您需要使用 const 或 let 声明内部 function。 然后你就不需要使用它了。 它不再是 class。

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