Javascript onChange在react js中未触发

我在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>
 );

}

从“React”导入React；
从“道具类型”导入道具类型；
从“反应下拉列表”导入下拉列表；
常量选项=[
{值：'1'，标签：'1'}，
{value:'two'，label:'two'，className:'myOptionClassName'}，
];
类WebDashboardPage扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={}
}
全=（事件）=>{
log（“选择的选项：”）；
this.setState（{value:event.target.value}）；
};
render（）{
返回(
this.quan（e.target.value）}/>
);
}

当我单击下拉列表中的项目时，它会显示错误

“TypeError:无法读取未定义的属性'quan'”

我是个反应迟钝的新手 提前感谢

更改为

onChange={this.quan}

，同样在初始状态下，您应该声明this.state.value

this.state = {
 value: ''
}

---

还可以尝试在html元素上学习，而不是在jsx上学习。您应该这样做：

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

    }

类WebDashboardPage扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={value:''}
this.quan=this.quan.bind（this）；
}
全（活动）{
log（“选择的选项：”）；
this.setState（{value:event.target.value}）；
};
render（）{
返回(
);
}

问题似乎出在

react下拉列表中。您需要在那里提交一个问题

react下拉列表
组件可能未在某处使用
this.props.onChange
或可能使用有问题


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

this.state = {
  value: ''
}

是什么导致了问题？
您使用的下拉依赖项不会以事件作为参数触发onChange，而是以所选选项触发onChange。请尝试更改

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

到

换成

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

类WebDashboardPage扩展组件{
建造师（道具）{
超级（道具）；
常量选项=[
{
值：“一”，
标签：“一”
}, {
值：“2”，
标签:"两个",，
类名：“myOptionClassName”
}
];
this.state={options}
}
quan=（选择的选项）=>{
console.log（“选择的选项：”+selectedOption.value）；
this.setState（{value:selectedOption.value}）；
};
render（）{
返回（）；
}
}
反应下拉列表库没有问题。以下是我设置并更正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;  

从“React”导入React；
从“反应下拉列表”导入下拉列表；
导入“react下拉列表/style.css”；
常量选项=[
{值：“一”，标签：“一”}，
{值：“两个”，标签：“两个”，类名：“myOptionClassName”}
];
const defaultOption=选项[0]；
类WebDashboardPage扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
selectedValue:“
};
}
quan=值=>{
this.setState（{selectedValue:value}）；
};
render（）{
返回(
);
}
}
导出默认WebDashboardPage；
我只对代码做了一点重构。主要的变化是
下拉列表处理变化的方式。当你将一个函数传递给
handleChange
时，
下拉列表
在内部调用该函数并将所选对象传递给它，所以你所需要做的就是创建一个处理程序方法，其中包含一个您将使用ch更新状态。我还为值设置了初始状态。这是一个演示

import React，{Component，Fragment}来自“React”；
从“react dom”导入react dom；
从“反应下拉列表”导入下拉列表；
常量选项=[
{值：“一”，标签：“一”}，
{值：“两个”，标签：“两个”，类名：“myOptionClassName”}
];
类WebDashboardPage扩展组件{
状态={
值：{}
};
quan=值=>{
log（“所选选项：”，值）；
this.setState（{value}）；
};
render（）{
返回(
);
}
}
导出默认WebDashboardPage；
这应该是onChange={e=>This.quan（e）}或onChange={This.quan}它不起作用了相同的错误显示还有其他问题您在组件中的任何位置定义了两次quan吗？因为quan在代码中是一个函数，但错误显示属性，所以您必须在组件中的其他位置定义quancomponent@Think-我彻底检查了两次我的代码中没有其他代码OK做一件事宿主代码行并共享链接或在此处共享您的所有代码这是唯一帮助您的方法它不起作用相同的错误显示任何其他解决方案它不起作用相同的错误显示任何其他解决方案我尝试了您的代码，但显示了错误“TypeError:无法读取未定义的属性'quan'”在进入应用程序之前，这意味着您忘记添加this.quan=this.quan.bind（this）；在Constructor中我尝试了上述所有操作，但问题仍然存在。我已粘贴了我尝试过的代码。它应该可以工作
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;  

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;