DND: brandontilley.com blog post, React components and valueLink
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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}); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var Editor = React.createClass({ | |
mixins: [React.addons.LinkedStateMixin], | |
getInitialState: function() { | |
return { text: "" }; | |
}, | |
render: function() { | |
return <input type="text" valueLink={this.linkState("text")} />; | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
value: ..., // current value of this.state[key] | |
requestChange: function() { ... } // function to call to update this.state[key] | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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} />; | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ... | |
render: function() { | |
<ColorPicker value={this.state.color} | |
onChange={this.handleChange} /> | |
}, | |
handleChange: function(color) { | |
this.setState({color: color}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ... | |
mixins: [React.addons.LinkedStateMixin], | |
render: function() { | |
<ColorPicker valueLink={this.linkState("color")} /> | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var ColorPicker = React.createClass({ | |
// ... | |
getValueLink: function(props) { | |
return props.valueLink || { | |
value: props.value, | |
requestChange: props.onChange | |
}; | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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