[英]onChange is not triggering in 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>
);
}
當我單擊下拉列表中的項目時,它會顯示錯誤
“類型錯誤:無法讀取未定義的屬性 'quan'”
我是新手,提前感謝
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;
你應該這樣做:
<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: ''
}
是造成問題的原因嗎?
您使用的下拉依賴項不會使用事件作為參數觸發 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
在內部調用該函數並將所選對象傳遞給它,因此您需要做的就是創建一個處理程序方法,該方法具有一個用於更新狀態的參數。 我還為 value 設置了一個初始狀態。 這是一個演示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;
更改為onChange={this.quan}
,同樣在初始狀態,您應該聲明您的 this.state.value
this.state = {
value: ''
}
也嘗試在 html 元素上學習它,而不是在 jsx 上
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.