Web Demo Mobile Demo Angular Demo Vue Demo React Demo
源代码
import React from 'react';
import { ComboBox, Label } from 'rc-easyui';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
      data: this.getData()
    }
  }
  getData() {
    return [
      { value: 11, text: "Mr. Nice" },
      { value: 12, text: "Narco" },
      { value: 13, text: "Bombasto" },
      { value: 14, text: "Celeritas" },
      { value: 15, text: "Magneta" },
      { value: 16, text: "RubberMan" },
      { value: 17, text: "Dynama" },
      { value: 18, text: "Dr IQ" },
      { value: 19, text: "Magma" },
      { value: 20, text: "Tornado" }
    ];
  }
  formatText(value) {
    if (this.state.value && this.state.value.length > 3) {
      return this.state.value.length + " items selected";
    }
    return value;
  }
  render() {
    return (
      <div>
        <h2>Multiple Select</h2>
        <Label htmlFor="c1" align="top">Select a hero:</Label>
        <ComboBox
          style={{ width: 250 }}
          inputId="c1"
          multiple
          data={this.state.data}
          value={this.state.value}
          textFormatter={this.formatText.bind(this)}
          onChange={(value) => this.setState({ value: value })}
        />
        <p>You selected: {this.state.value && this.state.value.join(',')}</p>
      </div>
    );
  }
}

export default App;