Get value from a textbox in popupbox using reactjs

Question

I have a program which opens a dialog box on button click.

The dialog box contains : inputbox, submit and cancel button. I am just wondering how do I get the value of the input box after submitting the form. Posting code and Fiddle below.

JSBIN

<!DOCTYPE html>
<html>
<head>
<link href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.min.css" rel="stylesheet"     type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<script src="http://fb.me/react-0.3.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.3.0.js"></script>

 <meta charset="utf-8">
 <title>JS Bin</title>
 </head>
<body>
<div id="component"></div>
<script type="text/jsx">
  /** @jsx React.DOM */

var DialogContent = React.createClass({
  render: function(){
  return(
  <div>
    <form onSubmit={this.handleSubmit}>
      <input ref="inputText" />
      <input type="submit" />
      <button onClick = {this.props.closeDialog}>Cancel</button>
    </form>
  </div>
  )
   }
  });


  var DialogExample = React.createClass({

  openDialog: function(e){
  e.preventDefault();

  var $dialog = $('<div>').dialog({
    title: 'Example Dialog Title',
    width: 400,
    close: function(e){
      React.unmountAndReleaseReactRootNode(this);
      $( this ).remove();
    }
  });

  var closeDialog = function(e){
    e.preventDefault();
    $dialog.dialog('close');
  }

  React.renderComponent(<DialogContent closeDialog={closeDialog} />, $dialog[0])
  },
  render: function(){
  return(
      <button onClick= {this.openDialog}>Open Dialog</button>
    )
  }
  });

 React.renderComponent(<DialogExample />, document.getElementById('component'));

  </script>

</body>
</html>

Note: I am new to reactjs.

yonatanmn · Accepted Answer · 2014-12-24 16:02:39Z

1

try this:

var DialogContent = React.createClass({
 handleSubmit: function(e){
  e.preventDefault();     
 },
 handleClick: function(){
      console.log(this.refs.inputText.getDOMNode().value) 
 },
render: function(){
  return(
  <div>
    <form onSubmit={this.handleSubmit}>
      <input ref="inputText" />
      <input type="submit" onClick={this.handleClick.bind(this)} />
      <button onClick = {this.props.closeDialog}>Cancel</button>
    </form>
  </div>
  )
}

});

instead of console.log, you can traverse the value upwards with a function received in props.

answered Dec 24, 2014 at 16:02

yonatanmn

1,6001 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get value from a textbox in popupbox using reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related