|
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