|
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 |
|