在React JS中，onChange事件未被触发

Question

我在React JS应用程序中使用了下拉菜单，但是onChange事件没有触发

我的代码如下：

import React from "react";
import PropTypes from "prop-types";
import Dropdown from 'react-dropdown';
const options = [
   { value: 'one', label: 'One' },
   { value: 'two', label: 'Two', className: 'myOptionClassName' },

 ];

 class WebDashboardPage extends React.Component {

  constructor(props) {
  super(props);
  this.state = {}
  }

 quan = (event)=> {
console.log("Option selected:");
 this.setState({ value: event.target.value });
};

render() {

return(
  <b><Dropdown className="dropdownCss" options={options} onChange={e => 
  this.quan(e.target.value)} /></b>
 );

}

当我点击下拉菜单中的项目时，会显示错误。

"TypeError: Cannot read property 'quan' of undefined"

我是React的新手，谢谢您提前的帮助。

- Mohammed Abdul kadhir

---

这应该是onChange={e => this.quan(e)}或onChange={this.quan}。 - Hemadri Dasari

你的组件中是否有定义了两次 quan？因为在你的代码中 quan 是一个函数，但错误提示说它是一个属性，所以你必须在组件中的其他地方定义了 quan。 - Hemadri Dasari

你可以在构造函数中尝试使用类似于 this.quan = this.quan.bind(this); 的普通函数，并将你的函数更改为 quan(event)。 - Hemadri Dasari

我尝试了，但在这种情况下，它仍会在进入应用程序之前给出同样的错误：“TypeError: Cannot read property 'quan' of undefined”。 - Mohammed Abdul kadhir

好的，你可以将你的代码放到网上并分享链接，或者在这里分享所有的代码，这是唯一能帮助你的方式。 - Hemadri Dasari

Answer 1

react-dropdown库没有问题。这是我设置并更正了OP代码的代码沙盒。它可以工作。

import React from "react";
import Dropdown from "react-dropdown";
import "react-dropdown/style.css";
const options = [
  { value: "one", label: "One" },
  { value: "two", label: "Two", className: "myOptionClassName" }
];
const defaultOption = options[0];
class WebDashboardPage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedValue: ""
    };
  }

  quan = value => {
    this.setState({ selectedValue: value });
  };

  render() {
    return (
      <Dropdown options={options} value={defaultOption} onChange={this.quan} />
    );
  }
}

export default WebDashboardPage;  

- Murli Prajapati

Answer 2

你应该这样做：

<Dropdown className="dropdownCss" options={options} onChange={this.quan} />

试试这个：

 class WebDashboardPage extends React.Component {

      constructor(props) {
      super(props);
      this.state = { value: '' }
      this.quan = this.quan.bind(this);
      }

     quan(event) {
     console.log("Option selected:");
     this.setState({ value: event.target.value });
    };

    render() {

    return(
      <div><Dropdown className="dropdownCss" options={options} onChange={this.quan} /></div>
     );

    }

- Jaz

---

它仍然无法运行，显示相同的错误。 还有其他解决方案吗？ - Mohammed Abdul kadhir

我尝试了你的代码，但在进入应用程序之前就出现了错误“TypeError: Cannot read property 'quan' of undefined”。 - Mohammed Abdul kadhir

这意味着您忘记在构造函数中添加this.quan = this.quan.bind(this);。 - Nisfan

Answer 3

似乎问题出在react-dropdown组件本身上。您需要在那里提交一个问题。 react-dropdown组件可能没有在某个地方使用this.props.onChange，或者可能存在问题。

---

或者，很可能是该组件需要定义未定义的value状态？

this.state = {
  value: ''
}

“什么引起了这个问题？”

- Bhojendra Rauniyar

---

我尝试了以上所有方法，但问题仍然存在。 - Mohammed Abdul kadhir

Answer 4

您正在使用的下拉依赖项不会将事件作为参数触发onChange，而是在选择选项时触发onChange。尝试更改。

onChange={e => 
  this.quan(e.target.value)}

到

onChange={this.quan}

将 "quan" 改为：

quan = (selectedOption)=> {
 console.log("Option selected:"+selectedOption.value);
 this.setState({ value: selectedOption.value });
};

我已在我的机器上尝试过，它完美地运行。另外一个重要的事情是，不要像你现在这样放置选项，而是将其放置在状态中。我的最终代码是：

class WebDashboardPage extends Component {

constructor(props) {
super(props);

const options = [
  {
    value: 'one',
    label: 'One'
  }, {
    value: 'two',
    label: 'Two',
    className: 'myOptionClassName'
  }
];

this.state = {options}
}

quan = (selectedOption) => {
console.log("Option selected:" + selectedOption.value);
this.setState({value: selectedOption.value});
};
render() {
return (<b><Dropdown className="dropdownCss" options={this.state.options} onChange={this.quan}/></b>);
}
}

- Abhijet

---

我已经复制粘贴了我尝试过的代码。你可以试一下，应该能够工作。 - Abhijet

Answer 5

我只对代码进行了一点重构。主要变化在于Dropdown如何处理更改。当您将函数传递给handleChange时，Dropdown会在内部调用该函数并将所选对象传递给它，因此您只需要创建一个具有一个参数的处理程序方法，该参数将用于更新状态。我还为值设置了初始状态。这里是一个演示 https://codesandbox.io/s/4qz7n0okyw

import React,  { Component, Fragment } from "react";
import ReactDOM from "react-dom";
import Dropdown from "react-dropdown";

const options = [
  { value: "one", label: "One" },
  { value: "two", label: "Two", className: "myOptionClassName" }
];

class WebDashboardPage extends Component {
  state = {
    value: {}
  };

  quan = value => {
    console.log("Option selected:", value);
    this.setState({ value });
  };

  render() {
    return (
      <Fragment>
        <Dropdown
          className="dropdownCss"
          options={options}
          onChange={this.quan}
        />
      </Fragment>
    );
  }
}

export default WebDashboardPage;

- kingisaac95

Answer 6

修改为onChange={this.quan}，同时在初始状态中声明this.state.value

this.state = {
 value: ''
}

同时尝试在HTML元素上学习它，而不是JSX上。

- Kamil Staszewski

---

它仍然无法正常工作，显示相同的错误信息。 还有其他解决方案吗？ - Mohammed Abdul kadhir