Jak radzić sobie z fokusowaniem przy użyciu deklaratywnych/funkcjonalnych bibliotek takich jak Redux i ReactJS?

Question

Rozglądając się, aby zobaczyć, w jaki sposób inni deweloperzy zajmują się wprowadzaniem fokusu podczas pracy z Redux, natknąłem się na pewne ogólne wskazówki dotyczące ReactJS components such as this. Obawiam się jednak, że funkcja focus() jest niezbędna i mogłem zobaczyć dziwne zachowania możliwe, gdy wiele komponentów walczy o skupienie. Czy istnieje sposób radzenia sobie z fokusem? Czy ktokolwiek zajmuje się pragmatycznym ustawianiem ostrości przy użyciu redux ireagowania i czy są to jakich technik używasz?

pokrewne:

• How to set focus on an element in Elm?
• Automatically focus input element after creation in purescript-halogen
• https://github.com/cyclejs/cycle-core/issues/153

Answer 1

Moje podejście jest użycie ref zwrotnego, który jest swego rodzaju onRenderComplete elementu. W tym oddzwonieniu mogę skupić się (warunkowo, jeśli to konieczne) i uzyskać referencję dla przyszłego ogniskowania.

Jeśli dane wejściowe są renderowane warunkowo po uruchomieniu działania, to odwołanie zwrotne powinno wywołać fokus, ponieważ ref nie istnieje jeszcze bezpośrednio po wywołaniu akcji, ale dopiero po wykonaniu renderowania. Radzenie sobie z componentDidUpdate dla takich rzeczy jak focus wydaje się tylko bałaganem.

// Composer.jsx -- contains an input that will need to be focused somewhere else 

class Composer extends Component { 
    render() { 
    return <input type="text" ref="input" /> 
    } 

    // exposed as a public method 
    focus() { 
    this.refs.input.focus() 
    } 
} 

// App.jsx 

@connect(
    state => ({ isComposing: state.isComposing }), 
    ... 
) 
class App extends Component { 
    render() { 
    const { isComposing } = this.props // or props, doesn't matter 
    return (
     <div> 
     <button onClick={::this._onCompose}>Compose</button> 
     {isComposing ? <Composer ref={c => { 
      this._composer = c 
      this._composer && this._composer.focus() // issue initial focus 
     }} /> : null} 
     </div> 
    ) 
    } 

    _onCompose() { 
    this.props.startComposing() // fire an action that changes state.isComposing 

    // the first time the action dispatches, this._composer is still null, so the ref takes care of the focus. After the render, the ref remains so it can be accessed: 

    this._composer && this._composer.focus() // focus if ref already exists 
    } 
} 

Dlaczego nie autoFocus lub isFocued prop?

Jak HTMLInputElement ma value jako rekwizyt, ale focus() jako metody - a nie isFocused rekwizyt - Chciałbym zachować przy użyciu metod poradzić. isFocused może uzyskać wartość, ale jeśli użytkownik zaciera się z wejścia, co dzieje się z tą wartością? To będzie niezsynchronizowane. Ponadto, jak wspomniano w komentarzach, autoFocus może kolidować z wieloma komponentami:

A więc jak wybierać między rekwizytami a metodami?

Dla większości przypadków rekwizytów będzie odpowiedź. Metody mogą być używane tylko w przypadku "pożaru i zapomnienia", na przykład scrollToBottom na czacie, gdy pojawia się nowa wiadomość, scrollIntoView i tym podobne. Są to jednorazowe zachowania, o które sklep nie dba, a użytkownik może zmienić interakcję, więc propozycja boolowska nie pasuje. W przypadku wszystkich innych rzeczy chodziłem z rekwizytami.

Oto jsbin:

http://jsbin.com/waholo/edit?html,js,output