Removed unused refs, replaced legacy string refs with function refs

Author: dmt0

src/components/widgets/TextArea.js

@@ -31,7 +31,6 @@ export default class TextArea extends Component {
     return (
       <span>
         <textarea
-          ref="textinput"
           value={this.state.value}
           rows={this.props.visibleRows}
           cols={this.props.areaWidth}

src/components/widgets/text_editors/HTML.js

@@ -8,7 +8,6 @@ class HTML extends TextArea {
     const editorClassNames = className ? className : 'text-editor__html';
     return (
       <textarea
-        ref="textinput"
         value={this.state.value}
         placeholder={this.props.placeholder}
         onChange={this.onChange}

src/components/widgets/text_editors/LaTeX.js

@@ -63,7 +63,6 @@ export default class LaTeX extends TextArea {
     const editorClassNames = className ? className : 'text-editor__latex';
     return (
       <textarea
-        ref="textinput"
         value={this.state.value}
         placeholder={this.props.placeholder}
         onChange={this.onChange}

src/components/widgets/text_editors/RichText/LinkEditor.js

@@ -22,7 +22,7 @@ class LinkEditor extends Component {
   componentDidMount() {
     // Focus the input field if the URL value is empty
     if (this.props.linkURL.trim() === '') {
-      findDOMNode(this.refs.input).focus();
+      findDOMNode(this.input).focus();
     }
   }
 
@@ -41,7 +41,7 @@ class LinkEditor extends Component {
     // Cursor dissappears when component rerenders, to make sure it's present
     // we're using setSelection range to make it appear at the end of text:
     // https://github.com/plotly/streambed/issues/9964
-    findDOMNode(this.refs.input).setSelectionRange(
+    findDOMNode(this.input).setSelectionRange(
       this.props.linkURL.length,
       this.props.linkURL.length
     );
@@ -104,7 +104,7 @@ class LinkEditor extends Component {
           onFocus={onFocus}
           onChange={ev => this.onInputChange(ev.target.value)}
           onKeyDown={ev => this.onInputKeyDown(ev)}
-          ref="input"
+          ref={input => (this.input = input)}
           value={linkURL}
           placeholder={placeholderText}
         />

src/components/widgets/text_editors/RichText/StyleButtonGroup.js

@@ -24,7 +24,6 @@ class StyleButtonGroup extends Component {
         {styles.map(({label, value}) => (
           <StyleButton
             key={value}
-            ref={value}
             active={isActive(currentStyle, value)}
             label={label}
             onToggle={onToggle}

src/components/widgets/text_editors/RichText/index.js

@@ -163,7 +163,7 @@ class RichText extends Component {
   }
 
   focus() {
-    this.refs.editor.focus();
+    this.editorInput.focus();
   }
 
   // Used to properly calculate user selection coordinates.
@@ -349,7 +349,7 @@ class RichText extends Component {
             onFocus={this.onFocus}
             placeholder={this.props.placeholder}
             spellCheck={false}
-            ref="editor"
+            ref={input => (this.editorInput = input)}
           />
         </div>
         {this.renderLinkEditor(selectedLinkID)}