Pinaev Pinaev - 2 years ago 125
React JSX Question

How I use ReactDOM.findDOMNode() in react for front-end on ruby on rails

var SearchForm = React.createClass({
handleSearch: function() {
alert('sd');
var query = ReactDOM.findDOMNode(this.refs.query).value;

alert(query);
var self = this;
alert('Dom');
$.ajax({
url: '/api/events/search',
data: { query: query },
success: function(data) {
self.props.handleSearch(data);
},
error: function(xhr, status, error) {
alert('Search error: ', status, xhr, error);
}
});
},
render: function() {
return(
<input onChange={this.handleSearch}
type="text"
className="form-control"
placeholder="Type search phrase here..."
ref="query" />
)
}
});


It's content of search_form.js.jsx
But if I run the app, ReactDOM.findDOMNode() doesn't work.
So therefore, alert(query) doesn't rise up.

Who answer to me?

Answer Source

Any reason why you're not using the state or props (in this case you'd lift up the state). One possible solution would be to add the query value as part of the state and change it on each change event. You can find a code example here

var SearchForm = React.createClass({
 getInitialState() {
 return {
    query: ''
 }
},

...

render: function() {
 return(
   <input onChange={this.handleSearch}
         type="text"
         className="form-control"
         placeholder="Type search phrase here..."
         value={this.state.query} />

 )
}
});
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download