Reactjs: 使用valueLink与单选按钮

Question

有没有办法在单选按钮中使用valueLink？在双向绑定文档中没有提到，我似乎也无法找到解决方法。或者我需要手动处理单选按钮，使用checked值和onChange处理器吗？

- Bob Ralian

Answer 1

您可以编写自己的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>
    }
})

- Andrew Luzkovky

Answer 2

ReactLink 是一个非常小的组件（大约十几行）。它只处理具有“正常”值属性的元素。单选按钮值属性的行为不同，React 使用 checked 属性来处理 单选按钮。如果您喜欢，仍然可以使用 ReactLink 进行簿记，请参见 此 fiddle 中的示例。编写一个 mixin 来处理单选按钮情况并不需要太多工作；使用 ReactLink 源代码 作为起点。

文档：

• ReactLink源码
• 表单文档
• 不使用valueLink的ReactLink

编辑: 在LinkedValueUtils中似乎有一个checkedLink处理程序，但我真的弄不清楚它应该如何工作。请参见此处的代码。

编辑2：checkedLink处理程序仅适用于复选框。如果我们中的某个人提交PR，则可能会在未来的版本中支持单选按钮。（原文）

- couchand