Question

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

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>
    }
})

Answer 2

ReactLink是very tiny（大约十几行）。它只处理具有＆＃34; normal＆＃34;价值属性。单选按钮值属性的行为不同，React使用checked属性for radio buttons。如果您愿意，仍然可以使用ReactLink for bookkeeping，请参阅this fiddle以获取示例。写一个mixin来处理单选按钮的情况不是太多的工作;使用ReactLink source作为起点。

文档：

编辑： checkedLink似乎有一个LinkedValueUtils处理程序，但我无法弄清楚它应该是怎样的工作。请参阅the code here。

编辑2： checkedLink处理程序为only for checkboxes。也许未来版本会看到单选按钮支持，如果我们其中一个人提交PR，则更有可能。

Reactjs：使用vaseLine和单选按钮

2 个答案: