Closed bobiblazeski closed 9 years ago
Hi @bobiblazeski,
What happens if you change:
{
country: ReactDOM.findDOMNode(this.refs.country).value,
...
}
to:
{
country: this.refs.country.value
...
}
?
The error stays the same this.refs.country is select that doesn't have to do anything with react-typeahead.
Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by Typeahead
Here's complete component
var R = require('ramda');
var React = require('react');
var ReactDOM =require('react-dom');
var Typeahead = require('react-typeahead').Typeahead;
var Dispatcher = require('../../Dispatcher');
var countries = require('../../../data/countries');
var maxVisible = 3;
var Location = module.exports = React.createClass({
displayName: 'LocationFormField ',
componentWillMount: function() {
this.onCountry = function() {
if (this.props.action) {
Dispatcher.dispatch(this.props.action, {
country: this.refs.country.value, //ReactDOM.findDOMNode(this.refs.country).value,
city: ''
});
}
}.bind(this);
this.onCity = function(city){
if (this.props.action) {
Dispatcher.dispatch(this.props.action, {
country: ReactDOM.findDOMNode(this.refs.country).value,
city: city
});
}
}.bind(this);
},
render: function() {
var cities = getCities(this.props.country || 'XX');
var autocomplete = R.isEmpty(cities)
? ". . ."
: (<Typeahead options={cities}
maxVisible={2}
onOptionSelected={this.onCity}
value={this.props.city}
/>
);
return (
<div className="form-field">
<label className="form-field__label">Located</label>
<div className="form-field__value">
<div className="selectcontainer">
<select className="input-select"
ref='country'
value={this.props.country}
onChange={this.onCountry}>
{countries.map(function(d){
return (<option key={d.code} value={d.code}>{d.name}</option>);
})}
</select>
</div>
{autocomplete}
</div>
</div>
);
}
});
Location.propTypes = {
country : React.PropTypes.string.isRequired,
city : React.PropTypes.string
}
function getCities(code){
var country = R.find(R.propEq('code',code),countries);
return country ? country.cities : [];
}
The problem is in v0.14.0 not liking something that Typeahead is doing, I had the same warning with several other react components that need to be updated see below:
https://github.com/paramaggarwal/react-dropzone/issues/80 https://github.com/dozoisch/react-google-recaptcha/issues/11 https://github.com/linxtion/react-image-gallery/issues/15
is there an npm release for this change? Last change detected here is one month ago.
.... react-typeahead?
I don't think anyone has submitted a PR to fix this yet, so there's no update for react-typeahead with the fix.
@fmoo Doesn't this PR take care of this ticket? https://github.com/fmoo/react-typeahead/pull/136
Wow, I totally missed that PR.
Do you have any thoughts on bumping minor version for this so I can do a release with this and #138?
Are there any other PRs you'd like to have in the next release as well?
@fmoo I would say you could release this as 1.1.5 and the other as 1.2 since it has breaking changes in it.
Just did an update and getting same warnings. Any news on this?
@SylarRuby - I just pushed 1.1.5 to npm. If you update, the new react warnings from 0.14.0 will go away.
Many thanks.
@fmoo Thanks. Solved.
I just switched to React 0.14.0 and I'm getting below warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by
Typeahead
.componentWillMount this.onCity = function(city){ if (this.props.action) { Dispatcher.dispatch(this.props.action, { country: ReactDOM.findDOMNode(this.refs.country).value, city: city }); } }.bind(this); render (<Typeahead options={cities} maxVisible={2} onOptionSelected={this.onCity} value={this.props.city} />