带有复选框的双向绑定始终返回“on”答案

【问题标题】：Two-way binding with checkboxes always returns "on"带有复选框的双向绑定始终返回“on”
【发布时间】：2014-07-03 04:08:43
【问题描述】：

我正在尝试按照以下官方教程在 React.js 框架中重现一个简单的双向绑定示例："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 的数据绑定方法有什么区别？

有什么想法吗？

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

【问题讨论】：

标签： javascript data-binding reactjs

【解决方案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 不能同时用于两者，这似乎很遗憾！

【讨论】：

您好，感谢您的回答！我现在就测试一下！
看看checkedLink 而不是valueLink，这似乎可行。我在文档中找不到对 checkedLink 的引用，但它在 release notes
非常感谢！关于我的第二个问题，您能告诉我“无 valueLink”和“无 LinkedStateMixin”绑定方法有什么区别吗？
魔法，很高兴听到。这些示例表明“双向绑定”助手并不特殊，它们只是设置 onChange 和 setState 的简写。它还试图展示两个方面（从 DOM 元素中获取值，并在 React 组件上设置状态）是如何独立的，因此您可以使用其中一个或另一个或两者的简写。我上面的回答也是一个例子，我已经从使用 valueLink 更改为使用 checkedLink，同时仍然使用相同的 linkState 帮助器。
这将在下一个 React 版本中得到更好的记录：github.com/facebook/react/pull/1952

【解决方案2】：

一个使用状态的简单解决方案：

  constructor(props) { // list of objects
    super(props);
    this.state = {
      is_checked: false
    };
  }

  toggleCheckbox(event) {
    let newValue = (this.state.is_checked === "on" || this.state.is_checked === true) ? false : true;
    this.setState({
      is_checked: newValue
    });
  }

  render() {
    return (
      <div>
        <input type="checkbox" checked={this.state.is_checked}
          onChange={this.toggleCheckbox.bind(this)}
        />
      </div>
    );
  }

【讨论】：