javascript - 带有复选框的双向绑定(bind)总是返回 "on"

Question

我正尝试按照以下官方教程在 React.js 框架中重现一个简单的双向绑定(bind)示例:"Two-Way Binding Helpers" .

我创建了一个如下所示的“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 Without LinkedStateMixin之间有什么区别和 ReactLink Without valueLink数据绑定(bind)的方法 ?

有什么想法吗？

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

Answer 1

复选框上的“值”属性是固定的，在过去，它是与表单一起提交的值仅当复选框被选中时。

快速修复是这样的:

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 不能同时用于两者，这似乎很遗憾!