|
11 | 11 | - Package size is: 1.42KB (0.7KB gzipped!).
|
12 | 12 | - Supports all `<input />`s, checkboxes and `<select />`.
|
13 | 13 | - Supports `<select multiple />`.
|
| 14 | + - Supports checkboxes with same via [array notation](#array-notation). |
14 | 15 | - Multiple bundles: [CJS, ESM and UMD](dist).
|
15 | 16 |
|
16 | 17 | ## Installation
|
@@ -85,17 +86,19 @@ By default, **react-input-handler** handles checkbox as boolean value. Sometimes
|
85 | 86 | **Before:**
|
86 | 87 |
|
87 | 88 | ```js
|
88 |
| - <input type="checkbox" name="numbers" value="1" onChange={ReactInputHandler.bind(this)} /> |
89 |
| - <input type="checkbox" name="numbers" value="2" onChange={ReactInputHandler.bind(this)} /> |
90 |
| - <input type="checkbox" name="numbers" value="3" onChange={ReactInputHandler.bind(this)} /> |
| 89 | + <input type="checkbox" name="one" value="1" onChange={this.inputHandler} checked /> |
| 90 | + <input type="checkbox" name="two" value="2" onChange={this.inputHandler} /> |
| 91 | + <input type="checkbox" name="three" value="3" onChange={this.inputHandler} checked /> |
| 92 | + // state: { one: true, two: false, three: true } |
91 | 93 | ```
|
92 | 94 |
|
93 | 95 | **After:**
|
94 | 96 |
|
95 | 97 | ```js
|
96 |
| - <input type="checkbox" name="numbers[]" value="1" onChange={ReactInputHandler.bind(this)} /> |
97 |
| - <input type="checkbox" name="numbers[]" value="2" onChange={ReactInputHandler.bind(this)} /> |
98 |
| - <input type="checkbox" name="numbers[]" value="3" onChange={ReactInputHandler.bind(this)} /> |
| 98 | + <input type="checkbox" name="numbers[]" value="1" onChange={this.inputHandler} checked /> |
| 99 | + <input type="checkbox" name="numbers[]" value="2" onChange={this.inputHandler} /> |
| 100 | + <input type="checkbox" name="numbers[]" value="3" onChange={this.inputHandler} checked /> |
| 101 | + // state: { numbers: ["1", "3"] } |
99 | 102 | ```
|
100 | 103 |
|
101 | 104 | ## Development
|
|
0 commit comments