我在反应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:无法读取未定义的属性'quan'”
我是新手,提前做出反应
react-dropdown
库没有问题。这是我设置的code sandbox并更正了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;
更改为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>
);
}
似乎问题在于react-dropdown
组件本身。你需要在那里提出问题。
react-dropdown
组件可能没有在某处使用this.props.onChange
或可能使用有问题。
或者,它可能,该组件需要value
状态尚未定义?
this.state = {
value: ''
}
并导致了这个问题?
您正在使用的下拉依赖项不会使用event作为参数触发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>);
}
}
我只对代码进行了一些重构。主要的变化是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;