我有两个组成部分:1:StudentList 2:主修react和antd。
StudentList Component
列出了学生列表。
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-单击“主要”组件中的Select major to filter
按钮
2-单击StudentList组件标题中的selected major
。
注意:我想在相同的地方打开相同的弹出窗口(类似于单击Select major to filter
按钮时的情况)
也许可以使用state
和handleVisibleChange
函数来处理。但我不知道如何从2个组件处理它。我很高兴听到您的解决方案。
答案 0 :(得分:1)
您可以使用Antd's tooltip中的visible
和onVisibleChange
属性,因为PopOver
也使用它们。您可以在文档中的Andt example中找到一个简单的how to control a PopOver by visible
。
要获取按钮单击,可以使用antd's Button Api中的onClick
。
使用React Components的理想示例:
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 Component示例。