Web Demo Mobile Demo Angular Demo Vue Demo React Demo

分割按钮 SplitButton

源代码
import React from 'react';
import { SplitButton, MenuButton, Menu, MenuItem, MenuSep, SubMenu, Panel, LinkButton, SwitchButton } from 'rc-easyui';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      enabled: true
    }
  }
  editMenu() {
    return (
      <Menu>
        <MenuItem text="Undo" iconCls="icon-undo"></MenuItem>
        <MenuItem text="Redo" iconCls="icon-redo"></MenuItem>
        <MenuSep></MenuSep>
        <MenuItem text="Cut"></MenuItem>
        <MenuItem text="Copy"></MenuItem>
        <MenuItem text="Paste"></MenuItem>
        <MenuSep></MenuSep>
        <MenuItem text="Toolbar">
          <SubMenu>
            <MenuItem text="Address"></MenuItem>
            <MenuItem text="Link"></MenuItem>
            <MenuItem text="Navigation Toolbar"></MenuItem>
            <MenuItem text="Bookmark Toolbar"></MenuItem>
            <MenuSep></MenuSep>
            <MenuItem text="New Toolbar..."></MenuItem>
          </SubMenu>
        </MenuItem>
        <MenuItem text="Delete" iconCls="icon-remove"></MenuItem>
        <MenuItem text="Select All"></MenuItem>
      </Menu>
    )
  }
  helpMenu() {
    return (
      <Menu>
        <MenuItem text="Help"></MenuItem>
        <MenuItem text="Update"></MenuItem>
        <MenuItem text="About"></MenuItem>
      </Menu>
    )
  }
  aboutMenu() {
    return (
      <Menu noline>
        <div style={{ padding: '10px' }}>
          <img src="https://www.jeasyui.com/images/logo1.png" style={{ width: 150, height: 50 }} />
        </div>
      </Menu>
    )
  }
  render() {
    const enabled = this.state.enabled;
    const disabled = !enabled;
    return (
      <div>
        <h2>SplitButton State</h2>
        <div style={{ marginBottom: 20 }}>
          <SwitchButton
            style={{ width: 100 }}
            onText="Enabled"
            offText="Disabled"
            value={enabled}
            onChange={(value) => this.setState({ enabled: value })}
          />
        </div>
        <Panel bodyStyle={{ padding: '5px' }}>
          <LinkButton plain>Home</LinkButton>
          <SplitButton text="Edit" disabled={disabled} plain iconCls="icon-edit" menu={this.editMenu}></SplitButton>
          <SplitButton text="Help" disabled={disabled} plain iconCls="icon-help" menu={this.helpMenu}></SplitButton>
          <MenuButton text="About" disabled={disabled} plain menu={this.aboutMenu}></MenuButton>
        </Panel>
      </div>
    );
  }
}

export default App;