AutoFocus element wejściowy w celu reakcji JS

Question

Nie mogę automatycznie ustawić ostrości znacznika wejściowego renderowanego w tym komponencie. Czego tu mi brakuje?

class TaskBox extends Component { 
    constructor() { 
    super(); 
    this.focus = this.focus.bind(this); 
    } 

    focus() { 
    this.textInput.focus(); 
    } 

    componentWillUpdate(){ 
    this.focus(); 
    } 

    render() { 
    let props = this.props; 
    return (
     <div style={{display: props.visible ? 'block' : 'none'}}> 
     <input 
     ref={(input) => { this.textInput = input; }} 
     onBlur={props.blurFN} /> 
     <div> 
      <div>Imp.</div> 
      <div>Urg.</div> 
      <div>Role</div> 
     </div> 
     <div> 
      <button>Add goal</button> 
     </div> 
     </div> 
    ) 
    } 
} 

Każda pomoc jest doceniana.

Answer 1

Jest atrybut dostępny dla automatycznego ogniskowania autoFocus, możemy użyć dla automatycznego ogniskowania elementu wejściowego zamiast korzystania ref.

Korzystanie autoFocus z elementem wejściowym:

<input autoFocus />

Możemy również wykorzystać ref, ale z dopiskiem musimy wywołać metodę ostrości na właściwym miejscu, z którego dzwonisz, że w componentWillUpdate metody cyklu życia, że ​​metoda nie wyzwalane podczas wstępnego renderowania, zamiast tej metody użycie componentDidMount cyklem:

componentDidMount(){ 
    this.focus(); 
} 

shouldComponentUpdate: jest zawsze wywoływana przed metodą renderowania i umożliwia określenie, czy konieczne jest ponowne renderowanie, czy można je pominąć. Oczywiście ta metoda nigdy nie jest wywoływana przy renderowaniu początkowym. Zostanie wywołana tylko wtedy, gdy nastąpi zmiana stanu w komponencie.

componentWillUpdate zostaje wywołany, gdy tylko shouldComponentUpdate zwróci true.

componentDidMount: Natychmiast po wywołaniu metody renderowania wywoływana jest funkcja componentDidMount. Dostęp do DOM można uzyskać za pomocą tej metody, umożliwiając zdefiniowanie operacji DOM lub operacji pobierania danych. Wszelkie interakcje DOM powinny zawsze mieć miejsce w tym przypadku.

referencyjny: https://facebook.github.io/react/docs/react-component.html

Answer 2

Ustaw identyfikator do wejścia, a następnie użyć .setAttribute('autoFocus', true) do elementu, gdy chcesz to koncentruje