Javascript 从两个链接打开ant设计popover

我有两个部分：1：学生名单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>
      </>);
  }
 }

这是一个主要组件，带有打开popover的过滤器按钮：

class Major extends Component {
  render() {
    return (
      <Popover
        trigger="click"
        content={content} //list of majors
      >
        <Button>
            <FilterOutlined /> Select major to filter
        </Button>
      </Popover>
    );
  }
}

当我单击选择要筛选的专业按钮时，弹出窗口将打开以选择专业。我想更改代码，以便从两个位置打开此popover：

1-单击主组件中的选择要过滤的主组件按钮

2-单击学生列表组件标题中的选定专业

注意：我想在相同的位置打开相同的popover，类似于单击“选择要筛选的主要对象”按钮

也许它可以处理状态和可处理的变化函数。但我不知道如何从两个组件处理它。我很高兴听到您的解决方案。

您可以使用的visible和onVisibleChange属性，因为PopOver也使用它们。你可以在文档中找到一个简单的Andt

要获得按钮单击，可以使用onClick from

使用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>
      </>
    );
  }
}

这台机器正在运转

---

Edit1：添加了React组件示例。

Popover通过工具提示共享API。您可以使用visible属性切换Popover，但必须自己处理所有显示隐藏事件。你们也可以在少校的按钮上触发点击事件。谢谢你的回复。它可以工作，但不幸的是，我正在使用类组件，无法在我的项目中使用挂钩或函数组件。你对课堂组件有什么想法吗？从另一个组件调用setState或HandleVibleChange函数。我认为将给定的示例用于类而不是函数很容易，只要尝试一下-添加了使用React组件的示例+代码。如果你对答案满意，请接受并回答。

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>
    </>
  );
}