getting data out of textarea about react-autosize-textarea HOT 6 CLOSED

@tzapu you can use the prop innerRef to directly get the DOM node :)

<Textarea 
placeholder='Type here...'
className='textarea'
innerRef={(textarea) => { this.messageTextarea = textarea }}
key={ textarea_value }
defaultValue={ textarea_value } />

const textarea_value = this.messageTextarea.value

from react-autosize-textarea.

Hi @tzapu
which version of React are you using?

Anyway, every version of React should support string refs (https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute)

You can simply pass a prop ref to TextareaAutosize and then access through this.refs object.
If you need the DOM element and you're using React < 15 you should use ReactDOM.findDOMNode

class Example extends React.Component {

  componentDidMount() {
    // React 13
    console.log(React.findDOMNode(this.refs._ref).value);

    // React 14
    console.log(ReactDOM.findDOMNode(this.refs._ref).value);

    // React 15
    console.log(this.refs._ref.value);
  }

  render() {
    return <TextareaAutosize ref='_ref' />;
  }

}

PS: In general it's a good idea to avoid using refs to get an input/textarea value. You should try to save it in your state using the callback onChange and access it from there:

class Example extends React.Component {

  state = { value: null }

  onChange = (e) => this.setState({ value: e.target.value })

  render() {
    return <TextareaAutosize onChange={this.onChange} value={this.state.value} />;
  }

}

from react-autosize-textarea.

thanks for the hint. much appreciated
i was using this.refs.textarea.value
ref="textarea" in my case, of course, in react 15
i could also log the textarea itself, only .value was empty
i am currently trying another auto sizing text area so can t retest, but, again, thank yo very much for your hints. in case anyone stumbles upon this, they ve got a lot things to try now

from react-autosize-textarea.

@tzapu I have it working like this (uncontrolled, no state binding, React 16)

Notice the "ref"

<Textarea 
placeholder='Type here...'
className='textarea'
ref={(textarea) => { this.messageTextarea = textarea }}
key={ textarea_value }
defaultValue={ textarea_value } />

Than to get the value I just do:

const textarea_value = this.messageTextarea._rootDOMNode.value

from react-autosize-textarea.

@FrancescoCioria

index.js:2177 Warning: React does not recognize the `innerRef` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `innerref` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

React 16.1.1

from react-autosize-textarea.

@tzapu which version are you using? it shouldn't happen in the last version.
the latest version is 3.0.1

from react-autosize-textarea.