checkbox/docs/examples/simple.jsx at 4e0be680dbd65acbca53f67d8260cedd7b776e91 · react-component/checkbox · 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
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
/* eslint no-console:0, jsx-a11y/label-has-for: 0, jsx-a11y/label-has-associated-control: 0 */
import React from 'react';
import Checkbox from 'rc-checkbox';
import '../../assets/index.less';

function onChange(e) {
  console.log('Checkbox checked:', e.target.checked);
}

function onKeyDown(e) {
  console.log('Checkbox key down:', e.key);
}

function onKeyPress(e) {
  console.log('Checkbox key press:', e.key);
}

function onKeyUp(e) {
  console.log('Checkbox key up:', e.key);
}

export default class SimpleDemo extends React.Component {
  state = {
    disabled: false,
  };

  toggle = () => {
    this.setState(state => ({
      disabled: !state.disabled,
    }));
  };

  render() {
    return (
      <div style={{ margin: 20 }}>
        <div>
          <p>
            <label>
              <Checkbox checked onChange={onChange} disabled={this.state.disabled} />
              &nbsp; controlled checked rc-checkbox
            </label>
            &nbsp;&nbsp;
          </p>
          <p>
            <label>
              <input checked type="checkbox" onChange={onChange} disabled={this.state.disabled} />
              &nbsp; controlled checked native
            </label>
            &nbsp;&nbsp;
          </p>
        </div>

        <div>
          <p>
            <label>
              <Checkbox defaultChecked onChange={onChange} disabled={this.state.disabled} />
              &nbsp; defaultChecked rc-checkbox
            </label>
            &nbsp;&nbsp;
          </p>
          <p>
            <label>
              <input
                type="checkbox"
                defaultChecked
                onChange={onChange}
                disabled={this.state.disabled}
              />
              &nbsp; defaultChecked native
            </label>
            &nbsp;&nbsp;
          </p>
        </div>

        <div>
          <p>
            <label>
              <Checkbox
                name="my-checkbox"
                defaultChecked
                onChange={onChange}
                disabled={this.state.disabled}
              />
              &nbsp; defaultChecked rc-checkbox with name
            </label>
            &nbsp;&nbsp;
          </p>
          <p>
            <label>
              <input
                name="my-checkbox"
                type="checkbox"
                defaultChecked
                onChange={onChange}
                disabled={this.state.disabled}
              />
              &nbsp; defaultChecked native with name
            </label>
            &nbsp;&nbsp;
          </p>
        </div>

        <div>
          <p>
            <label>
              <Checkbox
                onChange={onChange}
                onKeyDown={onKeyDown}
                onKeyPress={onKeyPress}
                onKeyUp={onKeyUp}
                disabled={this.state.disabled}
              />
              &nbsp; rc-checkbox with key events
            </label>
            &nbsp;&nbsp;
          </p>
          <p>
            <label>
              <input
                type="checkbox"
                onChange={onChange}
                onKeyDown={onKeyDown}
                onKeyPress={onKeyPress}
                onKeyUp={onKeyUp}
                disabled={this.state.disabled}
              />
              &nbsp; native checkbox with key events
            </label>
            &nbsp;&nbsp;
          </p>
        </div>

        <div>
          <p>
            <label>
              <Checkbox
                defaultChecked
                checked={undefined}
                onChange={onChange}
                disabled={this.state.disabled}
              />
              &nbsp; defaultChecked rc-checkbox when checked value is undefined or null
            </label>
            &nbsp;&nbsp;
          </p>
          <p>
            <label>
              <input
                type="checkbox"
                defaultChecked
                checked={undefined}
                disabled={this.state.disabled}
              />
              &nbsp; defaultChecked native checkbox when checked value is undefined or null
            </label>
            &nbsp;&nbsp;
          </p>
        </div>

        <button type="button" onClick={this.toggle}>
          toggle disabled
        </button>
      </div>
    );
  }
}