m_vdbeek m_vdbeek - 1 year ago 87
React JSX Question

Two-way binding with checkboxes always returns "on"

I'm trying to reproduce a simple two-way binding example in the React.js framework by following this official tutorial: "Two-Way Binding Helpers".

I created a "MyCheckbox" component that looks like this:

var MyCheckbox = React.createClass({

mixins: [React.addons.LinkedStateMixin],

getInitialState: function () {
return {
fieldname: '',
value: this.props.value

render: function () {
var valueLink = this.linkState('value');
var me = this;
var handleChange = function (e) {
valueLink.requestChange(e.target.value === 'on');

return React.DOM.input({
type: 'checkbox',
checked: valueLink.value,
onChange: handleChange,


"MyCheckbox" is rendered the following way:

value: false
}), document.body);

When rendering the first time, everything works as expected, if the value is
, the checkbox will be checked, if the value is
then it will not.

If you initialise the checkbox as being unchecked and then check it, everything works fine.

Any ideas ?

I use the latest React.js version (

Answer Source

The "value" property on a checkbox is fixed, in the old days it was the value that was submitted along with the form only if the checkbox was checked.

The quick fix is this instead:


The valueLink only works when it is the value of the input that changes. Turns out that to link to the checked property, the checkedLink needs to be used instead:

render: function () {
    return React.DOM.div(null, [
            type: 'checkbox',
            checkedLink: this.linkState('value'),
        React.DOM.span(null, "state: " + this.state.value)

Seems a shame that the valueLink can't be used for both!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download