Why does the "A Component Using External Plugins" example use a ref?


(Adam) #1

On https://facebook.github.io/react#markdownExample:

class MarkdownEditor extends React.Component {
  ...
  handleChange() {
    this.setState({value: this.refs.textarea.value});
  }
  ...
  render() {
    return (
        ...
        <textarea
          onChange={this.handleChange}
          ref="textarea"
          defaultValue={this.state.value} />
    );
  }
}

would be functionally identical and more idiomatic as:

class MarkdownEditor extends React.Component {
  ...
  handleChange(e) {
    this.setState({value: e.target.value});
  }
  ...
  render() {
    return (
        ...
        <textarea
          onChange={this.handleChange}
          defaultValue={this.state.value} />
    );
  }
}

no?


(Adam) #2

Confirmed + PR accepted to update docs: https://github.com/facebook/react/pull/9160