有个需求要实现点击批量复制输入复制数量，点确认复制当前行，点取消隐藏气泡框。用对话框的话显得大材小用，毕竟只有一个输入框，而Popover气泡卡片正好可以满足需求而且占用面积小。因为里面添加了自定义的确认、取消按钮，所以需要手动控制气泡框的显隐，那么问题来了。当给定一个值来控制显隐时，是完全不够的，这样会造成所有气泡框会同时出现。官方文档只演示了只有一个气泡卡片的例子，当然可以直接给state一个visible来控制显隐，而要控制多个，则需要定义第二个值来配合

这是官方文档里的例子

import { Popover, Button } from 'antd';

class App extends React.Component {
  state = {
    visible: false,
  };

  hide = () => {
    this.setState({
      visible: false,
    });
  };

  handleVisibleChange = visible => {
    this.setState({ visible });
  };

  render() {
    return (
      <Popover
        content={<a onClick={this.hide}>Close</a>}
        title="Title"
        trigger="click"
        visible={this.state.visible}
        onVisibleChange={this.handleVisibleChange}
      >
        <Button type="primary">Click me</Button>
      </Popover>
    );
  }
}

ReactDOM.render(<App />, mountNode);

这是手动控制多个气泡框的例子，设置一个show值，只有当show跟visible同时满足条件才显示，或者干脆就只用show不用visible, 虽然没试过，但应该也是可以的。

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Popover, Button } from 'antd';

class App extends React.Component {
  state = {
    visible: false,
    show: 0,
  };

  hide = () => {
    this.setState({
      visible: false,
      show: 0
    });
  };

  handleVisibleChange = (visible,num) => {
    if(visible){
      this.setState({ visible,show:num });
    }else{
      this.setState({ visible,show:0});
    }
    
  };

  render() {
    return (
      <div>
      <Popover
        content={<a onClick={this.hide}>Close</a>}
        title="Title"
        trigger="click"
        visible={this.state.show === 1 && this.state.visible}
        onVisibleChange={(e)=>this.handleVisibleChange(e,1)}
      >
        <Button type="primary">Click me</Button>
      </Popover>
      <Popover
      content={<a onClick={this.hide}>Close</a>}
      title="Title"
      trigger="click"
      visible={this.state.show === 2 && this.state.visible}
      onVisibleChange={(e)=>this.handleVisibleChange(e,2)}
    >
      <Button type="primary">Click me</Button>
    </Popover>
    </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));