More explicit class method for ref doc (facebook#10228)

hartzis · sophiebits · commit 0d9b921ad5c3 · 2017-09-10T14:49:02.000-07:00
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. (cherry picked from commit 6d37c05)
diff --git a/docs/docs/refs-and-the-dom.md b/docs/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 {
   constructor(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
     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}
 class AutoFocusTextInput extends React.Component {
   componentDidMount() {
-    this.textInput.focus();
+    this.textInput.focusTextInput();
   }
 
   render() {

Original file line number	Diff line number	Diff line change
@@ -39,10 +39,10 @@ When the `ref` attribute is used on an HTML element, the `ref` callback receives
`39`	`39`	`class CustomTextInput extends React.Component {`
`40`	`40`	`constructor(props) {`
`41`	`41`	`super(props);`
`42`		`- this.focus = this.focus.bind(this);`
	`42`	`+ this.focusTextInput = this.focusTextInput.bind(this);`
`43`	`43`	`}`
`44`	`44`
`45`		`- focus() {`
	`45`	`+ focusTextInput() {`
`46`	`46`	`// Explicitly focus the text input using the raw DOM API`
`47`	`47`	`this.textInput.focus();`
`48`	`48`	`}`
@@ -77,7 +77,7 @@ When the `ref` attribute is used on a custom component declared as a class, the
`77`	`77`	```javascript{3,9}
`78`	`78`	`class AutoFocusTextInput extends React.Component {`
`79`	`79`	`componentDidMount() {`
`80`		`- this.textInput.focus();`
	`80`	`+ this.textInput.focusTextInput();`
`81`	`81`	`}`
`82`	`82`
`83`	`83`	`render() {`