select/docs/examples/controlled.tsx at 79d23af9c28f09d99db56180d58b3c790848c50b · react-component/select · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
/* eslint-disable no-console */
import React from 'react';
import Select, { Option } from '@rc-component/select';
import '../../assets/index.less';

interface ControlledState {
  destroy: boolean;
  value: string | number;
  open: boolean;
}

class Controlled extends React.Component<{}, ControlledState> {
  state = {
    destroy: false,
    value: 9,
    open: true,
  };

  onChange = (e) => {
    let value;
    if (e && e.target) {
      ({ value } = e.target);
    } else {
      value = e;
    }
    console.log('onChange', value);
    this.setState({
      value,
    });
  };

  onDestroy = () => {
    this.setState({
      destroy: true,
    });
  };

  onBlur = (v) => {
    console.log('onBlur', v);
  };

  onFocus = () => {
    console.log('onFocus');
  };

  onOpenChange = (open) => {
    this.setState({ open });
  };

  render() {
    const { open, destroy, value } = this.state;
    if (destroy) {
      return null;
    }
    return (
      <div style={{ margin: 20 }}>
        <h2>controlled Select</h2>
        <div style={{ width: 300 }}>
          <Select
            id="my-select"
            value={value}
            placeholder="placeholder"
            listHeight={200}
            style={{ width: 500 }}
            onBlur={this.onBlur}
            onFocus={this.onFocus}
            open={open}
            optionLabelProp="children"
            optionFilterProp="text"
            onChange={this.onChange}
            onOpenChange={this.onOpenChange}
          >
            <Option value="01" text="jack" title="jack">
              <b
                style={{
                  color: 'red',
                }}
              >
                jack
              </b>
            </Option>
            <Option value="11" text="lucy">
              lucy
            </Option>
            <Option value="21" disabled text="disabled">
              disabled
            </Option>
            <Option value="31" text="yiminghe">
              yiminghe
            </Option>
            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((i) => (
              <Option key={i} value={i} text={String(i)}>
                {i}-text
              </Option>
            ))}
          </Select>
        </div>
      </div>
    );
  }
}

export default Controlled;
/* eslint-enable */