Reactjs：使用带有单选按钮的 vaueLink答案

【问题标题】：Reactjs: Using vaueLink with radiobuttonsReactjs：使用带有单选按钮的 vaueLink
【发布时间】：2014-10-14 04:59:53
【问题描述】：

有没有办法将 valueLink 与单选按钮一起使用？ the two-way-binding documentation 中没有提到它，否则我似乎无法弄清楚。或者我是否需要使用选中的值和 onChange 处理程序手动处理单选按钮？

【问题讨论】：

标签： reactjs

【解决方案1】：

ReactLink 是very tiny（大约十几行）。它只处理具有“正常”值属性的元素。单选按钮值属性的作用不同，React 使用 checked 属性 for radio buttons。如果你愿意，你仍然可以使用ReactLinkfor bookkeeping，例如this fiddle。编写一个 mixin 来处理单选按钮的情况不会有太多的工作；使用 ReactLink source 作为起点。

文档：

编辑： LinkedValueUtils 中似乎确实有一个 checkedLink 处理程序，但我真的不知道它应该如何工作。见the code here。

编辑 2： checkedLink 处理程序是 only for checkboxes。也许未来的版本会支持单选按钮，如果我们中的一个人提交 PR。

【讨论】：

【解决方案2】：

您可以编写自己的 mixin。像这样的：

var LinkedStateRadioGroupMixin = {
    radioGroup : function(key){
        return {
            valueLink : function(value){
                return {
                    value : this.state[key] == value,
                    requestChange : function(){
                        var s = {};
                        s[key] = value;
                        this.setState(s) 
                    }.bind(this)  
                }
            }.bind(this)
        }
    }
}

var RegisterForm = React.createClass({
    mixins : [
        LinkedStateRadioGroupMixin
    ],
    getInitialState: function() {
        return {
            accountType : 'developer'
        };
    },
    register : function(e){
        e.preventDefault()
        alert(this.state.accountType)
    },
    render : function(){
        var accountType = this.radioGroup("accountType");
        return <form onSubmit={this.register}>
            <label>Manager:
                <input checkedLink={accountType.valueLink("manager")} type="radio" />
            </label>
            <label>Developer:
                <input checkedLink={accountType.valueLink("developer")} type="radio"/>
            </label>
            <button>register</button>
        </form>
    }
})

【讨论】：