открытое всплывающее окно с дизайном муравьев из двух ссылок

Question

У меня есть два компонента: 1: StudentList 2: Major in 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- нажмите selected major в заголовке в компоненте StudentList.

Примечание: я хочу открыть такое же всплывающее окно в том же месте (аналогично тому, как я нажимаю кнопку Select major to filter)

Может быть, он справится с state и handleVisibleChange функция. но я не знаю, как с этим справиться из двух компонентов. Рад слышать ваши решения.

Answer 1

Вы можете использовать свойства visible и onVisibleChange из всплывающей подсказки Antd , потому что они также используются PopOver. Вы можете найти простой пример от Andt , как управлять PopOver с помощью visible в документации.

Чтобы получить нажатие кнопки, вы можете использовать onClick from api кнопки antd .

Желаемый пример с использованием компонентов 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 .

Вот простой пример вашего запроса с использованием перехватчиков реакции и простых кнопок для открытия 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.