我有两个组件:1:StudentList 2:主修react和antd。
StudentList 组件
呈现了一个学生列表。
Major Component
列出了您可以选择的专业。选择专业后,所选专业的名称显示在学生列表的顶部。列表将根据所选专业进行筛选。
这是包含主要组件的 StudentList 组件:
class StudentList extends Component {
render(){
return(
<>
<Major/>
<h5>20 student found in <a>selected major</a></h5>
<List>
//this is the list of students and is not related to this question
</List>
</>);
}
}
这是主要组件,带有一个用于打开弹出窗口的过滤器按钮:
class Major extends Component {
render() {
return (
<Popover
trigger="click"
content={content} //list of majors
>
<Button>
<FilterOutlined /> Select major to filter
</Button>
</Popover>
);
}
}
当我单击 Select major to filter
按钮时,弹出窗口会打开以选择专业。我想更改代码以便从两个位置打开此弹出窗口:
1- 单击 Major 组件中的 Select major to filter
按钮
2- 点击 StudentList 组件标题中的 selected major
。
注意:我想在同一个地方打开同一个弹出框(类似于我点击Select major to filter
按钮)
也许它可以处理 state
和 handleVisibleChange
函数。但我不知道如何从 2 个组件处理它。我很高兴听到您的解决方案。
最佳答案
您可以使用 Antd's tooltip 中的 visible
和 onVisibleChange
属性因为它们也被 PopOver
使用。你可以找到一个简单的 example来自 Andt how to control a PopOver by visible
在文档中。
要获得按钮点击,您可以使用来自 antd's Button Api 的 onClick
.
使用 React 组件的理想示例:
class Major extends Component {
componentDidUpdate(prevProps) {
// Typical usage (don't forget to compare props):
if (this.props.value !== prevProps.value) {
this.setState({ visible: this.props.value });
}
}
state = {
visible: false
};
hide = () => {
this.setState({
visible: false
});
};
handleVisibleChange = visible => {
this.setState({ visible });
// this.props.onChange(visible); // add me to open popover on every click on studenlist
};
render() {
return (
<Popover
trigger="click"
content={<a onClick={this.hide}>Close</a>}
visible={this.state.visible}
onVisibleChange={this.handleVisibleChange}
>
<Button>Select major to filter</Button>
</Popover>
);
}
}
class StudentList extends Component {
state = {
visible: false
};
onClick = () => {
this.setState({ visible: !this.state.visible });
};
render() {
return (
<>
{/* <Major value={this.state.visible} onChange={setVisible} /> */}
<Major value={this.state.visible} />
<h5>
20 student found in <a>selected major</a>
</h5>
<Button onClick={this.onClick}>Select major from Studenlist</Button>
</>
);
}
}
组件示例 CodeSandBox .
这是您使用 react hooks 请求的简单示例和用于打开 PopOver
的简单按钮:
function Major({ value, onChange }) {
const [visible, setVisible] = useState(value);
useEffect(() => {
value && setVisible(value);
}, [value]);
const hide = () => setVisible(false);
const handleVisibleChange = visible => {
setVisible(visible);
onChange(visible);
};
return (
<Popover
trigger="click"
content={<a onClick={hide}>Close</a>}
visible={visible}
onVisibleChange={handleVisibleChange}
>
<Button>Select major to filter</Button>
</Popover>
);
}
function StudentList() {
const [visible, setVisible] = useState(false);
const onClick = () => {
setVisible(true);
};
return (
<>
<Major value={visible} onChange={setVisible} />
<h5>
20 student found in <a>selected major</a>
</h5>
<Button onClick={onClick}>Select major from Studenlist</Button>
</>
);
}
依赖的工作CodeSandBox .
Edit1:添加了 React 组件示例。
关于javascript - 从两个链接打开 ant design popover,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63203325/