"multiselect-react-dropdown" 是一个多选下拉框的 React 组件。要重置该组件中的选定值,可以通过以下步骤实现:
import React, { Component } from 'react';
import MultiselectReactDropdown from 'multiselect-react-dropdown';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
selectedValues: [] // 初始化选定值为空数组
};
}
handleReset = () => {
this.setState({ selectedValues: [] }); // 重置选定值为空数组
}
render() {
const options = [
{ value: 'option1', label: 'Option 1' },
{ value: 'option2', label: 'Option 2' },
{ value: 'option3', label: 'Option 3' }
];
return (
<div>
<MultiselectReactDropdown
options={options}
selectedValues={this.state.selectedValues}
onSelect={(selectedList) => this.setState({ selectedValues: selectedList })}
onRemove={(selectedList) => this.setState({ selectedValues: selectedList })}
/>
<button onClick={this.handleReset}>重置选定值</button>
</div>
);
}
}
export default MyComponent;
在上述代码中,我们定义了一个 handleReset 方法,当点击重置按钮时,该方法会将 selectedValues 状态重置为空数组,从而重置 "multiselect-react-dropdown" 组件中的选定值。
这样,当用户点击重置按钮时,"multiselect-react-dropdown" 组件的选定值将被重置为空。
云+社区沙龙online
云+社区沙龙online第5期[架构演进]
“中小企业”在线学堂
云+社区沙龙online [新技术实践]
云+社区沙龙online [新技术实践]
企业创新在线学堂
高校公开课
云+社区沙龙online [国产数据库]
领取专属 10元无门槛券
手把手带您无忧上云