Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
var Dialog = React.createClass({
render: function() {
// 1) render nothing, this way the DOM diff will never try to do
// anything to it again, and we get a node to mess with
return React.DOM.div();
},
componentDidMount: function() {
// 2) do DOM lib stuff
this.node = this.getDOMNode();
this.dialog = $(this.node).dialog({
autoOpen: false,
// pass in lib options from props
title: this.props.title,
close: this.props.onClose
}).data('ui-dialog');
// 3) call method to reconnect React's rendering
this.renderDialogContent(this.props);
},
componentWillReceiveProps: function(newProps) {
// 4) render reconnected tree when props change
this.renderDialogContent(newProps);
},
renderDialogContent: function(props) {
// 5) make a new rendering tree, we've now hidden the DOM
// manipulation that jQuery UI dialog did from React and
// continue the React render tree, some people call this
// a "portal"
React.renderComponent(React.DOM.div({}, props.children), this.node);
// 6) Call methods on the DOM lib via prop changes
if (props.open)
this.dialog.open();
else
this.dialog.close();
},
componentWillUnmount: function() {
// clean up the mess
this.dialog.destroy();
},
getDefaultProps: function() {
return {
title: '',
onClose: function(){}
}
}
});
@ryanflorence

This comment has been minimized.

Copy link
Owner Author

commented Sep 6, 2014

Methodology

  1. DOM libs usually manipulate the DOM
  2. React tries to re-render and finds a different DOM than it had last
    time and freaks out
  3. We hide the DOM manipulation from React
  4. Consumers of our component can stay in React-land.
@ryanflorence

This comment has been minimized.

Copy link
Owner Author

commented Sep 6, 2014

Usage:

/** @jsx React.DOM */

var App = React.createClass({

  getInitialState: function() {
    return { taco: null, showForm: false };
  },

  handleTacoSubmission: function(event) {
    event.preventDefault();
    var taco = this.refs.favoriteTaco.getDOMNode().value;
    this.setState({
      taco: taco,
      showForm: false
    });
  },

  renderTaco: function() {
    return this.state.taco ?
      "Your favorite taco is: "+this.state.taco:
      "You don't have a favorite taco yet.";
  },

  showForm: function() {
    this.setState({showForm: true});
  },

  handleDialogClose: function() {
    if (!this.state.taco)
      alert("You don't have a favorite taco?");
  },

  render: function() {
    return (
      <div>
        <button onClick={this.showForm}>Tell me your favorite taco</button>
        <p>{this.renderTaco()}</p>
        <Dialog
          title="Favorite Taco"
          open={this.state.showForm}
          onClose={this.handleDialogClose}
        >
          <form onSubmit={this.handleTacoSubmission}>
            <p>Tacos are delicious. Which is your favorite?</p>
            <p>
              <input type="text" ref="favoriteTaco"/> <button type="submit">Submit</button>
            </p>
          </form>
        </Dialog>
      </div>
    );
  }
});

React.renderComponent(<App/>, document.body);
@ryanflorence

This comment has been minimized.

Copy link
Owner Author

commented Sep 6, 2014

@DanWebProject

This comment has been minimized.

Copy link

commented Oct 25, 2014

hello nice to meet you,

I am new to this site where can someone help me with a .js code???

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.