DND: brandontilley.com blog post, React components and valueLink

ex_01.js

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

ex_02.js

var Editor = React.createClass({
  mixins: [React.addons.LinkedStateMixin],

  getInitialState: function() {
    return { text: "" };
  },

  render: function() {
    return <input type="text" valueLink={this.linkState("text")} />;
  }
});

ex_03.js

{
  value: ..., // current value of this.state[key]
  requestChange: function() { ... } // function to call to update this.state[key]
}

ex_04.js

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

ex_05.js

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

ex_06.js

// ...

render: function() {
  <ColorPicker value={this.state.color}
               onChange={this.handleChange} />
},

handleChange: function(color) {
  this.setState({color: color});
}

ex_07.js

// ...

mixins: [React.addons.LinkedStateMixin],

render: function() {
  <ColorPicker valueLink={this.linkState("color")} />
}

ex_08.js

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

ex_09.js

var ColorPicker = React.createClass({
  // ...

  getValueLink: function(props) {
    return props.valueLink || {
      value: props.value,
      requestChange: props.onChange
    };
  }
});

ex_10.js

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