Reactjs: Using vaueLink with radio exchanges
Is there a way to use valueLink with radio buttons? He did not mention in the documentation with two-way linking and I cannot figure out what it is otherwise. Or do I need to manually manipulate checked value radio buttons and onChange handlers?
source to share
You can write your own mixin. Something like that:
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>
}
})
source to share
ReactLink
very small (about a dozen lines). It only processes elements that have "normal" value attributes. The values for the Radio Button attribute work differently, React uses the attribute checked
for the radio button . You can use ReactLink
for accounting if you like, see this fiddle for an example. It wouldn't be too much work to write a mixin to work with a soccer key; use the ReactLink
source as a starting point.
documents:
EDIT: There LinkedValueUtils
is a handler in there checkedLink
, but I can't figure out how this is supposed to work. See the code here .
EDIT 2: Handler checkedLink
for checkboxes only . Perhaps a future release will show radio button support, which is more likely if one of us sends a PR.
source to share