带复选框的双向绑定始终返回"on"

Question

我正在尝试通过遵循这个官方教程:"双向绑定助手"在React.js框架中重现一个简单的双向绑定示例.

我创建了一个"MyCheckbox"组件,如下所示:

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"以下列方式呈现:

React.renderComponent(MyCheckbox({
    value: false
}), document.body);

第一次渲染时,一切都按预期工作,如果值为true,则复选框将被选中,如果值为则false则不会.

如果您将复选框初始化为未选中,然后检查它,一切正常.

• 单击复选框取消选中它时的问题e.target.value始终是"打开".

• 我还想问一下ReactLink没有LinkedStateMixin和ReactLink之间有什么区别,没有valueLink数据绑定方法？

有任何想法吗 ？

我使用最新的React.js版本(v0.10.0).

Answer 1

复选框上的"value"属性是固定的,过去它只是在选中复选框时才与表单一起提交的值.

快速修复是这样的:

valueLink.requestChange(e.target.checked);

valueLink仅在输入值发生变化时才有效.事实证明,要链接到checked属性,需要使用checkedLink:

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

遗憾的是,valueLink不能同时用于两者!