带有复选框的双向绑定总是返回“on”

Two-way binding with checkboxes always returns "on"

本文关键字：返回 on 绑定 复选框      更新时间：2023-09-26

我尝试在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总是'on'。

  • 我还想问数据绑定的ReactLink Without LinkedStateMixin和ReactLink Without valueLink方法之间有什么区别?

有什么想法吗?

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

复选框上的"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不能同时用于两者!

一个简单的解决方案是使用state:

  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>
    );
  }
相关文章：