Browse Source

More explicit class method for ref doc (#10228)

After realizing this was the second time I've visited this exact page within a year and second guessing myself that the `textInput` ref isn't actually the `<input />` element. I decided to attempt to make this a little more explicit; you are actually accessing the method on the child class and not the `focus` method on the dom input element. Having them named the same caused some confusion.
main
Brian Emil Hartz 7 years ago
committed by Sophie Alpert
parent
commit
888a12b85d
  1. 6
      docs/refs-and-the-dom.md

6
docs/refs-and-the-dom.md

@ -39,10 +39,10 @@ When the `ref` attribute is used on an HTML element, the `ref` callback receives
class CustomTextInput extends React.Component { class CustomTextInput extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.focus = this.focus.bind(this); this.focusTextInput = this.focusTextInput.bind(this);
} }
focus() { focusTextInput() {
// Explicitly focus the text input using the raw DOM API // Explicitly focus the text input using the raw DOM API
this.textInput.focus(); this.textInput.focus();
} }
@ -77,7 +77,7 @@ When the `ref` attribute is used on a custom component declared as a class, the
```javascript{3,9} ```javascript{3,9}
class AutoFocusTextInput extends React.Component { class AutoFocusTextInput extends React.Component {
componentDidMount() { componentDidMount() {
this.textInput.focus(); this.textInput.focusTextInput();
} }
render() { render() {

Loading…
Cancel
Save