From d475f70910993d9a52a415e20d548baadd6e06fd Mon Sep 17 00:00:00 2001 From: Nick Williams Date: Thu, 5 Feb 2015 22:32:23 +0000 Subject: [PATCH] document checkbox using click handlers for change events I hit an issue related to this earlier today. Feels like a short paragraph warning of potential issues would be of benefit. Discussed with @zpao on IRC, agreed to make PR. For more info: * https://github.com/facebook/react/issues/3005#issuecomment-72513965 * https://github.com/facebook/react/blob/c7e4f55eb061b578497ed316d3e9e0dfa7026f46/src/browser/eventPlugins/ChangeEventPlugin.js#L287 --- docs/07-forms.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/07-forms.md b/docs/07-forms.md index 72725805..4e67343c 100644 --- a/docs/07-forms.md +++ b/docs/07-forms.md @@ -64,6 +64,10 @@ In this example, we are simply accepting the newest value provided by the user a This would accept user input but truncate the value to the first 140 characters. +### Potential Issues With Checkboxes and Radio Buttons + +Be aware that, in an attempt to normalise change handling for checkbox and radio inputs, React uses a `click` event in place of a `change` event. For the most part this behaves as expected, except when calling `preventDefault` in a `change` handler. `preventDefault` stops the browser from visually updating the input, even if `checked` gets toggled. This can be worked around either by removing the call to `preventDefault`, or putting the toggle of `checked` in a `setTimeout`. + ## Uncontrolled Components