javascript - 在反应中选择一个值后如何关闭下拉菜单?
问题描述
我在我的 React 项目中使用了一个下拉菜单。当我选择一个值时,我想关闭它。但它不会自动关闭。我该怎么做 ?
Dropdown.js
import React from 'react';
import { PropTypes } from 'prop-types';
import { DropdownToggle, DropdownMenu, UncontrolledDropdown } from 'reactstrap';
import * as Icon from 'react-bootstrap-icons';
import './DropDown.scss';
/**
* This is a reusable dropdown
* onClick function and dropdown items come as props
*/
class DropDown extends React.Component {
render() {
const { dropDownItemArray, text, onClick } = this.props;
const dropdownItems = dropDownItemArray.map((item,key) => {
return (
<div className="dropdown-items" onClick={onClick} >
{item}
</div>
);
});
return (
<div>
<UncontrolledDropdown className="multi-select-wrapper text p4">
<DropdownToggle className="select-dropdown">
<div className="select-text text p4">{text}</div>
<Icon.CaretDownFill />
</DropdownToggle>
<DropdownMenu name='test'>{dropdownItems}</DropdownMenu>
</UncontrolledDropdown>
</div>
);
}
}
DropDown.propTypes = {
text: PropTypes.string,
onClick: PropTypes.func,
menuItemArray: PropTypes.array
};
export default DropDown;
这将处理来自输入字段的所有输入值和从下拉列表中选择的值。
handleChangeInputs = (event) => {
if (event[0] === '<') {
this.setState({
editorHtml: event
});
} else {
if (event.type === 'change') {
this.setState({
[event.target.name]: event.target.value
});
} else {
if (event.target.parentNode.innerText[0] === 'C') {
console.log(event);
this.setState({
ticketType: event.currentTarget.textContent
});
} else {
console.log("test");
this.setState({
ticketPriority: event.currentTarget.textContent
});
}
}
}
};
这部分与下拉处理有关
if (event.target.parentNode.innerText[0] === 'C') {
console.log(event);
this.setState({
ticketType: event.currentTarget.textContent
});
} else {
console.log("test");
this.setState({
ticketPriority: event.currentTarget.textContent
});
}
解决方案
- 您可以在您的状态 dropdownOpen 中添加一个 toggleDropdown 函数以及一个属性,这将导致下拉菜单打开或关闭:
toggleDropdown = () => {
const dropdownOpen = this.state.dropdownOpen ? false : true;
this.setState({ dropdownOpen: dropdownOpen})
};
- 在 props 中传递 toggleDropdown 和 dropdownOpen 并在代码中引用它们:
const { toggleDropdown, dropdownOpen } = this.props;
[...]
<UncontrolledDropdown
isOpen={dropdownOpen || false}
toggle={toggleDropdown}
>
- 您的代码引用了一个 onClick 函数,但您已将函数命名为 handleChangeInputs。这是一个可以工作的 onClick 函数。
onClick = (event) => {
this.setState({ ticketType: event.currentTarget.textContent }, () => this.toggleDropdown()}
在 onClick 中调用 toggleDropdown 似乎只有在 this.setState 的回调中才有效。
推荐阅读
- html - 如何使用引导程序制作图像比例/中心?
- reactjs - 使用来自 Socketio 的 addEventListener 反应 Hooks
- html - 在不同的地方悬停时显示 div
- python - 如何将 numpy.ndarray 转换为 _io.BytesIO
- c# - 仅在 .NET Core 中出现 Roslyn 错误:“ResolvePackageFileConflicts”任务意外失败
- flutter-web - 在 Flutter web 中截屏
- python - 在 Google Colab 上解压缩 .7z 文件
- scala - Spark [1.5] 将数据帧作为 parquet 写入 HDFS 时间随时间线性增加
- css - 按钮和图像未在 Safari 中呈现身高
- amazon-ec2 - 使用 openvpn (aws ec2) 的 Twitter 请求太多?