Skip to content

Commit 51572ae

Browse files
committed
Feature: Support deep state traversal.
This features allow to set DOM element with name as 'a.b.c' indicating that the state should be accesed as: { a: { b: { c: 'value' } } }. For this, we are using lodash's set method as described here: https://lodash.com/docs/#set.
1 parent 5140791 commit 51572ae

11 files changed

+56
-19
lines changed

README.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,11 @@
88

99
## Features
1010

11-
- Package size is: 1.42KB (0.7KB gzipped!).
12-
- Supports all `<input />`s, `<textarea />` and `<select />`.
11+
- Package size is: **1.54KB** (0.7KB gzipped!).
12+
- Supports all `<input />`s, `<textarea />` and `<select />` elements.
1313
- Supports `<select multiple />`.
1414
- Supports checkboxes with same name via [array notation](#array-notation).
15+
- Play well with deep state traversal using [lodash's set method](https://lodash.com/docs/#set).
1516
- Multiple bundles: [CJS, ESM and UMD](dist).
1617

1718
## Installation
@@ -51,13 +52,13 @@ class Form extends React.Component {
5152
return (
5253
<form>
5354
<label>Fullname:</label>
54-
<input type="text" name="fullname" onChange={this.inputHandler} />
55+
<input type="text" name="user.fullname" onChange={this.inputHandler} />
5556

5657
<label>Biography:</label>
57-
<textarea type="text" name="bio" onChange={this.inputHandler} />
58+
<textarea type="text" name="user.bio" onChange={this.inputHandler} />
5859

5960
<label> Are you a developer?</label>
60-
<input type="checkbox" name="developer" value="yes" onChange={this.inputHandler} />
61+
<input type="checkbox" name="user.developer" value="yes" onChange={this.inputHandler} />
6162

6263
<button onClick={this.handleSubmit}>Submit</button>
6364
</form>
@@ -67,7 +68,7 @@ class Form extends React.Component {
6768
handleSubmit(event) {
6869
event.preventDefault()
6970
console.log(this.state)
70-
// Output: { fullanme: "string", bio: "string", developer: true|false }
71+
// Output: { user: { fullanme: "string", bio: "string", developer: true|false } }
7172
}
7273

7374
}

dist/react-input-handler.esm.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/react-input-handler.esm.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/react-input-handler.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

dist/react-input-handler.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)