Run Programmatically Check Input Component React-Bootstrap Programmatically
I am brand new to react, so this can be pretty easy. I am currently working on a Modal component (from ReactBootstrap) and I am using an Input-bootstrap Input component inside a Modal dialog component with type=email
. This is when inside the element <form>
and the submitted form will initiate validation and a popupp message is displayed on top of the input component if validation fails. However, I am not using this component inside an element <form>
and want to call it when the button is clicked. This is the working part of the code I have that presents the problem:
/** @jsx React.DOM */
var Modal = ReactBootstrap.Modal;
var ModalTrigger = ReactBootstrap.ModalTrigger;
var Button = ReactBootstrap.Button;
var Input = ReactBootstrap.Input;
var TheModal = React.createClass({
handleSubmit: function() {
// I want to trigger the email input validation here
// via this.refs.theInput
},
render: function() {
return (
<Modal {...this.props} title="Modal Title" animation={true} closeButton={false}>
<div className="modal-body">
<Input ref="theInput" type="email" label="Email Address" defaultValue="Enter email" />
</div>
<div className="modal-footer">
<Button bsStyle="primary" onClick={this.handleSubmit}>Send</Button>
<Button bsStyle="danger" onClick={this.props.onRequestHide}>Close</Button>
</div>
</Modal>
);
}
});
var App = React.createClass({
render: function() {
return (
<div>
<ModalTrigger modal={<TheModal />}>
<Button bsStyle="primary" bsSize="large">Trigger Modal</Button>
</ModalTrigger>
</div>
);
}
});
React.render( <App />,
document.getElementById('content')
);
source to share
Call the function getValue()
directly at the input.
this.refs.theInput.getValue()
should return your value theInput
.
Do not use getDOMNode()
if possible, because it is assumed that the underlying DOM implementation will not change in future versions. Have a look at react-bootstrap's Input.jsx file for other functionality.
source to share
Your event is onClick
connected before handleSubmit()
, it looks ok.
Doesn't accessing the email value through this.refs.theInput.getDOMNode().value
in work handleSubmit()
?
If so, I'm wondering if ReactBootstrap is overwriting <Input>
its own DOM <Input>
on some other elements; you may need to traverse the DOM tree to get to the actual <Input>
one to get the email value.
source to share
As Peter mentioned, I had to navigate the object quite far.
In my component render function;
render: function() {
return (
<form onSubmit={this.handleSubmit}>
<Input ref='gameTitle' type='text' buttonAfter={<Button type="submit">Save</Button>} />
</form>
);
}
In my function handleSubmit;
handleSubmit: function() {
console.log(this.refs.gameTitle.refs.input.getDOMNode().value);
}
source to share