fmoo / react-typeahead

Pure react-based typeahead and typeahead-tokenizer
ISC License
677 stars 230 forks source link

How to access the value of the component #127

Open tax opened 9 years ago

tax commented 9 years ago

Really stupid question what is the correct way to access the value of the input text after a value is set by the user?

<Typeahead
   ref="myinput"
   options={this.state.blaat}
   maxVisible={4}
/>
tax commented 9 years ago

One solution I found:

console.log(React.findDOMNode(this.refs.myinput.refs.entry).value);
codewithcheese commented 9 years ago

I trying to figure that also, you method seems the most logical so far. except I would write it like this: this.refs.myinput.refs.entry.getDOMNode().value

juanmnl commented 9 years ago

Got the value of the input by binding the onChange event:

<Typeahead
  options={apps}
  maxVisible={10}
  placeholder="Search"
  onChange={this.props.onSearched.bind(null, event)}
  />

And then on the parent component:


render: function() {
  return (
    <Search
      apps={this.state.appsCollection}
      onSearched={this._onSearched}
      />
  );
},

_onSearched: function(event) {
  console.log(event.target.value);
}

Hope this helps :smile:

lgiraudel commented 8 years ago

You can retrieve the value through the component state:

this.refs.myInput.state.entryValue;
thehuey commented 8 years ago

+1 Use the state.entryValue.

Don't make your code brittle by relying on underlying DOM structure

On Fri, Dec 4, 2015 at 2:56 PM, Loïc Giraudel notifications@github.com wrote:

You can retrieve the value through the component state:

this.refs.myInput.state.entryValue;

— Reply to this email directly or view it on GitHub https://github.com/fmoo/react-typeahead/issues/127#issuecomment-162104683 .