demo: upgrade popover demo

This commit is contained in:
afc163 2018-07-29 15:23:30 +08:00
parent 51d32baa62
commit a3a2bf9c7d

View File

@ -16,29 +16,16 @@ The following example shows how to create a popover which can be hovered and cli
````jsx ````jsx
import { Popover, Button } from 'antd'; import { Popover, Button } from 'antd';
const hoverContent = (
<div>
This is hover content.
</div>
);
const clickContent = (
<div>
This is click content.
</div>
);
const initalState = {
clicked: false,
hovered: false,
};
class App extends React.Component { class App extends React.Component {
state = initalState; state = {
clicked: false,
hovered: false,
};
hide = () => { hide = () => {
this.setState({ this.setState({
...initalState, clicked: false,
hovered: false,
}); });
} }
@ -57,9 +44,18 @@ class App extends React.Component {
} }
render() { render() {
const hoverContent = (
<div>
This is hover content.
</div>
);
const clickContent = (
<div>
This is click content.
</div>
);
return ( return (
<Popover <Popover
key="1"
style={{ width: 500 }} style={{ width: 500 }}
content={hoverContent} content={hoverContent}
title="Hover title" title="Hover title"
@ -68,8 +64,12 @@ class App extends React.Component {
onVisibleChange={this.handleHoverChange} onVisibleChange={this.handleHoverChange}
> >
<Popover <Popover
key="2" content={(
content={[clickContent, <a onClick={this.hide}>Close</a>]} <div>
{clickContent}
<a onClick={this.hide}>Close</a>
</div>
)}
title="Click title" title="Click title"
trigger="click" trigger="click"
visible={this.state.clicked} visible={this.state.clicked}