Skip to content

Instantly share code, notes, and snippets.

@BinaryMuse
Last active August 29, 2015 14:06
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save BinaryMuse/bd66e40b00598e1288f2 to your computer and use it in GitHub Desktop.
DND: brandontilley.com blog post, React components and valueLink
var Editor = React.createClass({
getInitialState: function() {
return { text: "" };
},
render: function() {
return <input type="text" value={this.state.text}
onChange={this.handleChange} />;
},
handleChange: function(evt) {
this.setState({text: evt.target.value});
}
});
var Editor = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return { text: "" };
},
render: function() {
return <input type="text" valueLink={this.linkState("text")} />;
}
});
{
value: ..., // current value of this.state[key]
requestChange: function() { ... } // function to call to update this.state[key]
}
var Editor = React.createClass({
mixins: [React.addons.LinkedStateMixin],
getInitialState: function() {
return { text: "" };
},
render: function() {
var valueLink = this.linkState("text");
var handleChange = function(evt) {
valueLink.requestChange(evt.target.value);
};
return <input type="text" value={valueLink.value}
onChange={handleChange} />;
}
});
var ColorPicker = React.createClass({
propTypes: {
value: React.PropTypes.string,
onChange: React.PropTypes.func
},
getDefaultProps: function() {
return {
value: "",
onChange: function() {}
};
},
render: function() {
return <div />;
},
componentDidMount: function() {
jQuery(this.getDOMNode()).colorPicker({
// initial color from the `value` prop
pickerDefault: this.props.value,
onColorChange: this.onColorChange
});
},
componentWillReceiveProps: function(nextProps) {
if (this.props.value !== nextProps.value) {
// new `value` prop triggers manual change in plugin
var node = jQuery(this.getDOMNode());
node.val(nextProps.value);
node.change();
}
},
onColorChange: function(id, color) {
// color changes sent to parent via `onChange` prop
this.props.onChange(color);
}
});
// ...
render: function() {
<ColorPicker value={this.state.color}
onChange={this.handleChange} />
},
handleChange: function(color) {
this.setState({color: color});
}
// ...
mixins: [React.addons.LinkedStateMixin],
render: function() {
<ColorPicker valueLink={this.linkState("color")} />
}
var ColorPicker = React.createClass({
propTypes: {
valueLink: React.PropTypes.shape({
value: React.PropTypes.string.isRequired,
requestChange: React.PropTypes.func.isRequired
})
},
getDefaultProps: function() {
return {
valueLink: {
value: "",
requestChange: function() {}
}
};
},
render: function() {
return <div />;
},
componentDidMount: function() {
jQuery(this.getDOMNode()).colorPicker({
// initial color from the `valueLink` prop
pickerDefault: this.props.valueLink.value,
onColorChange: this.onColorChange
});
},
componentWillReceiveProps: function(nextProps) {
if (this.props.valueLink.value !== nextProps.valueLink.value) {
// new `valueLink.value` prop triggers manual change in plugin
var node = jQuery(this.getDOMNode());
node.val(nextProps.valueLink.value);
node.change();
}
},
onColorChange: function(id, color) {
// color changes sent to parent via `valueLink` prop
this.props.valueLink.requestChange(color);
}
});
var ColorPicker = React.createClass({
// ...
getValueLink: function(props) {
return props.valueLink || {
value: props.value,
requestChange: props.onChange
};
}
});
var ColorPicker = React.createClass({
propTypes: {
value: React.PropTypes.string,
onChange: React.PropTypes.func,
valueLink: React.PropTypes.shape({
value: React.PropTypes.string.isRequired,
requestChange: React.PropTypes.func.isRequired
})
},
getDefaultProps: function() {
return {
value: "",
onChange: function() {},
valueLink: null
};
},
getValueLink: function(props) {
return props.valueLink || {
value: props.value,
requestChange: props.onChange
};
},
render: function() {
return <div />;
},
componentDidMount: function() {
jQuery(this.getDOMNode()).colorPicker({
pickerDefault: this.getValueLink(this.props).value,
onColorChange: this.onColorChange
});
},
componentWillReceiveProps: function(nextProps) {
var currentValueLink = this.getValueLink(this.props),
nextValueLink = this.getValueLink(nextProps);
if (currentValueLink.value !== nextValueLink.value) {
var node = jQuery(this.getDOMNode());
node.val(nextValueLink.value);
node.change();
}
},
onColorChange: function(id, color) {
this.getValueLink(this.props).requestChange(color);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment