New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update 09.2-form-input-binding-sugar.md -> document checkedLink #1952

Merged
merged 2 commits into from Aug 13, 2014

Conversation

Projects
None yet
3 participants
@slorber
Contributor

slorber commented Jul 29, 2014

Add better explanation for 2-way data binding to checkboxes using checkedLink. As mentionned here: #1930

Update 09.2-form-input-binding-sugar.md
Add better explanation for 2-way data binding to checkboxes using `checkedLink`. As mentionned here: #1930
@facebook-github-bot

This comment has been minimized.

facebook-github-bot commented Jul 29, 2014

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at cla@fb.com. Thanks!

@facebook-github-bot

This comment has been minimized.

facebook-github-bot commented Jul 29, 2014

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

@@ -66,7 +66,11 @@ var WithLink = React.createClass({
`ReactLink` objects can be passed up and down the tree as props, so it's easy (and explicit) to set up two-way binding between a component deep in the hierarchy and state that lives higher in the hierarchy.
Note that `<input>` supports ReactLink for both `value` and `checked`.
Note that `<input>` supports ReactLink for both `value` and `checked`. For checkboxes, you should use `checkedLink` instead of `valueLink`, as their value is fixed to `on`:

This comment has been minimized.

@zpao

zpao Jul 29, 2014

Member

as their value is fixed to on

I don't understand what you're saying here.

This comment has been minimized.

@slorber

slorber Jul 30, 2014

Contributor

@zpao I'm not sure if it's the correct way to explain this as I don't. Check this for more details: http://stackoverflow.com/questions/23665905/two-way-binding-with-checkboxes-always-returns-on
http://stackoverflow.com/questions/12911787/html-checkbox-default-value

I think this JsFiddle correctly illustrate this behavior:
http://jsfiddle.net/kb3gN/4180/

On Child1 and Child3 I used valueLink instead of checkedLink.

  • You can see in Child1 that by default the value keeps being "on" as the checkbox is checked or unchecked. According to SO this default value is not specified on specification
  • You can see in Child3 that this default value "on" can be changed to another value, but this requires to initially link it to a non-undefined value in my state, because the valueLink will actually never modify this value again.

So @chenglou can you explain why you say checkedLink=valueLink= ???

@slorber

This comment has been minimized.

Contributor

slorber commented Jul 30, 2014

@zpao I've tried to explain it better in this commit

@chenglou sorry I'm not used to PR and I thought it was you that corrected me with checkedLink=valueLink= while it was my typo

@slorber

This comment has been minimized.

Contributor

slorber commented Jul 31, 2014

@chenglou yes it was a typo.
I've added a new commit.
It seems that the new version parses correctly:

<input type="checkbox" checkedLink={this.linkState('booleanValue')} />

@zpao zpao added the documentation label Aug 13, 2014

@zpao

This comment has been minimized.

Member

zpao commented Aug 13, 2014

👍 this looks fine to me now. The defaulting to on is still a little bit confusing but I see that this is just a byproduct of the DOM. Thanks!

zpao added a commit that referenced this pull request Aug 13, 2014

Merge pull request #1952 from slorber/master
Update 09.2-form-input-binding-sugar.md -> document checkedLink

@zpao zpao merged commit ec6653a into facebook:master Aug 13, 2014

1 check passed

continuous-integration/travis-ci The Travis CI build passed
Details

zpao added a commit that referenced this pull request Sep 3, 2014

Merge pull request #1952 from slorber/master
Update 09.2-form-input-binding-sugar.md -> document checkedLink
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment