如何解决当弹出框没有单击时如何关注弹出框?
我正在尝试创建一个自动聚焦的弹出窗口。我不想单击弹出窗口,而是希望鼠标光标在弹出窗口时聚焦,而无需单击它。
- 我尝试在
autoFocus={true}
中添加<Select
的attr,但效果不佳。
import React from "react";
import "./styles.css";
import { Select,Popover } from "antd";
const { Option } = Select;
export default function App() {
function ButtonActions() {
function onChange(value) {
console.log(value);
}
function onBlur() {
// console.log('blur');
}
function onFocus() {
// console.log('focus');
}
function onSearch(val) {
// console.log('search:',val);
}
return (
<Select
//why autoFocus don't work?
autoFocus={true}
showSearch
bordered={false}
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
onSearch={onSearch}
filterOption={(input,option) =>
option.children.indexOf(input.toLowerCase()) >= 0
}
defaultValue="options"
style={{ width: 120 }}
>
<Option className="btn btn-danger" value="delete">
option
</Option>
</Select>
);
}
const content = (
<div>
<ButtonActions />
</div>
);
return (
<div className="App">
<Popover placement="topLeft" trigger="click" content={content}>
<div>click me</div>
</Popover>
<div>don't click</div>
</div>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。