javascript - this.textInput.focus is not a function - React - Stack Overflow

admin管理员组

文章数量:1287646

I have FormControl for password input with icon that toggles the mask, so u cant see the characters you are inputting. But whenever I toggle this mask I also want to re-focus the input field.

<FormGroup
    className="input-text input-text--password"
    controlId={id}
    validationState={submitFailed && touched && error ? 'error' : validationState}
  >

    <FormControl
      {...input}
      disabled={disabled}
      className="input-text__input"
      autoFocus={autoFocus}
      type={maskEnabled ? 'password' : 'input'}
      onChange={this.handleFormControlChange}
      maxLength={maxLength}
      ref = { ref => this.textInput = ref }
    />
    <div
        className={'input-text__button ' + (maskEnabled ? 'mask-enabled' : 'mask-disabled')}
        onClick={this.handleToggleInputMode}
    />

... I use this method to focus:

handleToggleInputMode() {
  let newMaskEnabled = !this.state.maskEnabled;
  this.setState({maskEnabled: newMaskEnabled});
  this.textInput.focus();
}

But i keep getting error

Uncaught TypeError: this.textInput.focus is not a function

So i tried to put it in ComponentDidMount but then the whole ponend stopped responding (didnt accept any char I typed in). What am i missing?

I have FormControl for password input with icon that toggles the mask, so u cant see the characters you are inputting. But whenever I toggle this mask I also want to re-focus the input field.

<FormGroup
    className="input-text input-text--password"
    controlId={id}
    validationState={submitFailed && touched && error ? 'error' : validationState}
  >

    <FormControl
      {...input}
      disabled={disabled}
      className="input-text__input"
      autoFocus={autoFocus}
      type={maskEnabled ? 'password' : 'input'}
      onChange={this.handleFormControlChange}
      maxLength={maxLength}
      ref = { ref => this.textInput = ref }
    />
    <div
        className={'input-text__button ' + (maskEnabled ? 'mask-enabled' : 'mask-disabled')}
        onClick={this.handleToggleInputMode}
    />

... I use this method to focus:

handleToggleInputMode() {
  let newMaskEnabled = !this.state.maskEnabled;
  this.setState({maskEnabled: newMaskEnabled});
  this.textInput.focus();
}

But i keep getting error

Uncaught TypeError: this.textInput.focus is not a function

So i tried to put it in ComponentDidMount but then the whole ponend stopped responding (didnt accept any char I typed in). What am i missing?

• javascript
• jquery
• reactjs

Share Improve this question Follow edited Sep 29, 2017 at 8:24 Jigar Shah 6,22322 gold badges3131 silver badges4141 bronze badges asked Sep 29, 2017 at 8:19 DlikeDlike 8311 gold badge11 silver badge88 bronze badges 2

• maybe provide the whole ponent's code – Paul Fitzgerald Commented Sep 29, 2017 at 8:34
• relevant: github./facebook/react/issues/9328#issuement-298438237 - can get called with null - read caveats also here about anon funcs there. facebook.github.io/react/docs/refs-and-the-dom.html#caveats – Dimitar Christoff Commented Sep 29, 2017 at 8:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Please check working demo

 class App extends React.Component {
  ponentDidMount() {
    this.textInput.focus();
  }
  render() {
    return (
      <div>
        <div>
          <input
            defaultValue="It will not focus"
          />
        </div>
        <div>
          <input
            ref={(input) => { this.textInput = input; }}
            defaultValue="with focus"
          />
        </div>
      </div>
    );
  }
}
    
ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare./ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react/15.3.1/react-dom.js"></script>
<div id="app"></div>

Edit

for FormControl you should use inputRef as per documentation

<FormControl inputRef={ref => { this.input = ref; }} />

According to the current docs (https://reactjs/docs/refs-and-the-dom.html), use:

this.textInput.current.focus();

So it should reference to the current to get the DOM node.

本文标签： javascriptthistextInputfocus is not a functionReactStack Overflow