Bileşen oluşturulduktan sonra belirli bir metin alanına odaklanmanın tepki yolu nedir?

Belgeler, ref'lerin kullanılmasını öneriyor gibi görünüyor, örneğin:

ref="nameInput"Oluşturma işlevindeki girdi alanıma ayarlayın ve sonra arayın:

this.refs.nameInput.getInputDOMNode().focus(); 

Ama bunu nereye çağırmalıyım? Birkaç yer denedim ama işe yarayamıyorum.

Sen bunu yapması gerektiğini componentDidMountve refs callbackbunun yerine. Böyle bir şey

componentDidMount(){
   this.nameInput.focus(); 
}

class App extends React.Component{
  componentDidMount(){
    this.nameInput.focus();
  }
  render() {
    return(
      <div>
        <input 
          defaultValue="Won't focus" 
        />
        <input 
          ref={(input) => { this.nameInput = input; }} 
          defaultValue="will focus"
        />
      </div>
    );
  }
}
    
ReactDOM.render(<App />, document.getElementById('app'));

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

@ Dhiraj'ın cevabı doğrudur ve kolaylık olması açısından, bir girişin monte edildiğinde otomatik olarak odaklanması için autoFocus pervanesini kullanabilirsiniz:

<input autoFocus name=...

Jsx'de autoFocusbüyük / küçük harf duyarsız olan eski html'den farklı olduğunu unutmayın .

React 0.15 itibariyle en kısa yöntem şudur:

<input ref={input => input && input.focus()}/>

Bağlamaya odaklan

Bir öğeyi yalnızca monte edildiğinde (başlangıçta oluştururken) odaklamak istiyorsanız, autoFocus özniteliğinin basit bir kullanımı yapılır.

<input type="text" autoFocus />

Dinamik odak

odağı dinamik olarak kontrol etmek için uygulama ayrıntılarını bileşenlerinizden gizlemek için genel bir işlev kullanın.

React 16.8 + Fonksiyonel bileşen - useFocus hook

const FocusDemo = () => {

    const [inputRef, setInputFocus] = useFocus()

    return (
        <> 
            <button onClick={setInputFocus} >
               FOCUS
            </button>
            <input ref={inputRef} />
        </>
    )

}

const useFocus = () => {
    const htmlElRef = useRef(null)
    const setFocus = () => {htmlElRef.current &&  htmlElRef.current.focus()}

    return [ htmlElRef, setFocus ] 
}

Tam Demo

React 16.3 + Sınıf Bileşenleri - utilizeFocus

class App extends Component {
  constructor(props){
    super(props)
    this.inputFocus = utilizeFocus()
  }

  render(){
    return (
      <> 
          <button onClick={this.inputFocus.setFocus}>
             FOCUS
          </button>
          <input ref={this.inputFocus.ref}/>
      </>
    )
  } 
}

const utilizeFocus = () => {
    const ref = React.createRef()
    const setFocus = () => {ref.current &&  ref.current.focus()}

    return {setFocus, ref} 
}

Tam Demo

React'te otomatik odaklama yapmak istiyorsanız, basit.

<input autoFocus type="text" />

Bu kodu nereye koyacağınızı bilmek istiyorsanız, yanıt componentDidMount () 'dadır.

v014.3

componentDidMount() {
    this.refs.linkInput.focus()
}

Çoğu durumda, DOM düğümüne bir ref ekleyebilir ve findDOMNode kullanmaktan kaçınabilirsiniz.

API belgelerini buradan okuyun: https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode

React 16.3 , bileşen yapıcısında bir ref oluşturarak ve bunu aşağıdaki gibi kullanarak yeni bir kullanışlı yol ekledi:

class MyForm extends Component {
  constructor(props) {
      super(props);

      this.textInput = React.createRef();
  }

  componentDidMount() {
    this.textInput.current.focus(); // one important change here is that we need to access the element via current.
  }

  render() {
    // instead of using arrow function, the created ref can be used directly.
    return(
      <div>
        <input ref={this.textInput} />
      </div>
    );
  }
}

Daha fazla ayrıntı için bu makaleyi kontrol edebilirsiniz React blogunda .

Güncelleme:

React 16.8'den başlayarak , useRefkanca, aynı sonucu elde etmek için fonksiyon bileşenlerinde kullanılabilir:

import React, { useEffect, useRef } from 'react';

const MyForm = () => {
  const textInput = useRef(null);

  useEffect(() => {
    textInput.current.focus();
  }, []);

  return (
    <div>
      <input ref={textInput} />
    </div>
  );
};

Ben sadece bu sorunla karşılaştı ve tepki 15.0.1 15.0.2 kullanıyorum ve ES6 sözdizimi kullanıyorum ve v.15 hafta önce ve bazı this.refsözellikleri düştüğünden beri diğer cevaplardan gerekenleri tam olarak alamadım kullanımdan kaldırıldı ve kaldırıldı .

Genel olarak, ihtiyacım olan şey:

1. Bileşen monte edildiğinde ilk giriş (alan) öğesine odaklanın
2. İlk giriş (alan) öğesini bir hata ile odaklayın (gönderdikten sonra)

Kullanıyorum:

• Reaksiyon Kabı / Sunum Bileşeni
• Redux
• Tepki-Yönlendirici

İlk Giriş Öğesine Odaklanma

Sayfada autoFocus={true}ilkinde kullandım , <input />böylece bileşen monte edildiğinde odaklanacaktır.

İlk Giriş Öğesini Hata ile Odaklayın

Bu daha uzun sürdü ve daha kıvrımlıydı. Kısalık için çözüm ile ilgili olmayan kodu dışarıda tutuyorum.

Redux Mağazası / Eyalet

Odaklamayı ayarlayıp ayarlamam gerektiğini bilmek için küresel bir duruma ihtiyacım var, bu yüzden bileşenler yeniden oluşturulduğunda odağı yeniden ayarlamaya devam etmiyorum (kullanacağım componentDidUpdate() odak ayarını kontrol etmek için . )

Bu uygulama için uygun gördüğünüz gibi tasarlanabilir.

{
    form: {
        resetFocus: false,
    }
}

Kapsayıcı Bileşeni

Bileşenin aşağıdakilere sahip olması gerekir: resetfocus özelliğin ayarlanmış özelliğin kendisinin ayarını ayarlaması durumunda özelliği temizlemek için bir callBack'e sahip olması gerekir.

Ayrıca, Eylem Yaratıcılarımı çoğunlukla projem oldukça büyük olduğu için ayrı dosyalar halinde düzenledim ve onları daha yönetilebilir parçalar haline getirmek istedim.

import { connect } from 'react-redux';
import MyField from '../presentation/MyField';
import ActionCreator from '../actions/action-creators';

function mapStateToProps(state) {
    return {
        resetFocus: state.form.resetFocus
    }
}

function mapDispatchToProps(dispatch) {
    return {
        clearResetFocus() {
            dispatch(ActionCreator.clearResetFocus());
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyField);

Sunum Bileşeni

import React, { PropTypes } form 'react';

export default class MyField extends React.Component {
    // don't forget to .bind(this)
    constructor(props) {
        super(props);
        this._handleRef = this._handleRef.bind(this);
    }

    // This is not called on the initial render so
    // this._input will be set before this get called
    componentDidUpdate() {
        if(!this.props.resetFocus) {
            return false;
        }

        if(this.shouldfocus()) {
            this._input.focus();
            this.props.clearResetFocus();
        }
    }

    // When the component mounts, it will save a 
    // reference to itself as _input, which we'll
    // be able to call in subsequent componentDidUpdate()
    // calls if we need to set focus.
    _handleRef(c) {
        this._input = c;
    }

    // Whatever logic you need to determine if this
    // component should get focus
    shouldFocus() {
        // ...
    }

    // pass the _handleRef callback so we can access 
    // a reference of this element in other component methods
    render() {
        return (
            <input ref={this._handleRef} type="text" />
        );
    }
}

Myfield.propTypes = {
    clearResetFocus: PropTypes.func,
    resetFocus: PropTypes.bool
}

genel bakış

Genel fikir, bir hataya ve odaklanabilecek her form alanının kendini kontrol etmesi ve kendisine odaklanması gerekip gerekmediğidir.

Verilen alanın odağı ayarlamak için doğru alan olup olmadığını belirlemek için gerçekleşmesi gereken iş mantığı vardır. Tek tek uygulamaya bağlı olacağı için bu gösterilmez.

Bir form gönderildiğinde, o etkinliğin genel odak bayrağını resetFocustrue olarak ayarlaması gerekir . Daha sonra her bileşen kendini güncellediğinde, odağı alıp almadığını kontrol etmeli ve eğer öyleyse, odağı sıfırlamak için olayı göndererek diğer öğelerin denetlemeye devam etmesine gerek kalmayacaktır.

düzenlemek Bir yan not olarak, benim iş mantığı bir "yarar" dosya vardı ve ben sadece yöntemi ihraç ve her içinde denirshouldfocus() yöntem .

Şerefe!

React belgelerinde artık bunun için bir bölüm var. https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute

 render: function() {
  return (
    <TextInput
      ref={function(input) {
        if (input != null) {
          input.focus();
        }
      }} />
    );
  },

Bu artık en iyi cevap değil. V0.13 itibariyle, bazı garip durumlarda this.refsSONRA çalışana kadar kullanılamayabilir componentDidMount().

autoFocusEtiketi giriş alanınıza eklemeniz yeterlidir, FakeRainBrigand yukarıda gösterildiği gibi.

Ref. @ Dave'in @ Dhiraj'ın cevabı hakkındaki yorumu; bir alternatif, oluşturulmuş öğede (bir bileşen ilk oluşturulduktan sonra) ref özelliğinin geri arama işlevini kullanmaktır:

<input ref={ function(component){ React.findDOMNode(component).focus();} } />

Daha fazla bilgi

Bu, otomatik odaklamanın doğru yoludur. Ref değeri olarak dize yerine geri arama kullandığınızda otomatik olarak çağrılır. Ref kullanarak DOM dokunmadan gerek yokgetDOMNode

render: function() {
  return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount: function() {
  this._input.focus();
},

Bu yanıtların hiçbirinin benim için bir material-ui TextField bileşeniyle çalışmadığını unutmayın . Per bir materialUI TextField için nasıl ayarlanır? Bunu işe almak için bazı çemberler atlamak zorunda kaldı:

const focusUsernameInputField = input => {
  if (input) {
    setTimeout(() => {input.focus()}, 100);
  }
};

return (
  <TextField
    hintText="Username"
    floatingLabelText="Username"
    ref={focusUsernameInputField}
  />
);

Bu yöntem çağrısını oluşturma işlevinin içine koyabilirsiniz. Ya da yaşam döngüsü yönteminin içinde,componentDidUpdate

İhtiyacınız yok getInputDOMNode?? bu durumda...

Bileşen monte edildiğinde sadece refve focus()alın - componentDidMount ...

import React from 'react';
import { render } from 'react-dom';

class myApp extends React.Component {

  componentDidMount() {
    this.nameInput.focus();
  }

  render() {
    return(
      <div>
        <input ref={input => { this.nameInput = input; }} />
      </div>
    );
  }

}

ReactDOM.render(<myApp />, document.getElementById('root'));

AutoFocus benim için en iyi sonucu verdi. Ben ile sona erdi bu yüzden çift tıklama üzerinde o metin ile bir giriş bazı metin değiştirmek gerekiyordu:

<input autoFocus onFocus={this.setCaretToEnd} value={this.state.editTodo.value} onDoubleClick={this.updateTodoItem} />

Not: React metnin başlangıcına düzeltme işareti yerleştirme sorunu gidermek için şu yöntemi kullanın:

setCaretToEnd(event) {
    var originalText = event.target.value;
    event.target.value = '';
    event.target.value = originalText;
}

Burada bulundu: https://coderwall.com/p/0iz_zq/how-to-put-focus-at-the-end-of-an-input-with-react-js

Aynı sorunum var ama ben de bazı animasyon var, bu yüzden meslektaşım window.requestAnimationFrame kullanmanızı öneririm

bu benim öğenin ref özniteliğidir:

ref={(input) => {input && window.requestAnimationFrame(()=>{input.focus()})}}

Uyarı: ReactDOMComponent: Bir DOM düğümünün .getDOMNode () öğesine erişmeyin; bunun yerine, düğümü doğrudan kullanın. Bu DOM düğümü tarafından oluşturuldu App.

Olmalı

componentDidMount: function () {
  this.refs.nameInput.focus();
}

En basit cevap, giriş metni öğesine ref = "bir isim" eklemek ve aşağıdaki işlevi çağırmaktır.

componentDidMount(){
   this.refs.field_name.focus();
}
// here field_name is ref name.

<input type="text" ref="field_name" />

Odağı yeni oluşturulan bir öğeye taşımak için öğenin kimliğini durumda saklayabilir ve ayarlamak için kullanabilirsiniz autoFocus. Örneğin

export default class DefaultRolesPage extends React.Component {

    addRole = ev => {
        ev.preventDefault();
        const roleKey = this.roleKey++;
        this::updateState({
            focus: {$set: roleKey},
            formData: {
                roles: {
                    $push: [{
                        id: null,
                        name: '',
                        permissions: new Set(),
                        key: roleKey,
                    }]
                }
            }
        })
    }

    render() {
        const {formData} = this.state;

        return (
            <GridForm onSubmit={this.submit}>
                {formData.roles.map((role, idx) => (
                    <GridSection key={role.key}>
                        <GridRow>
                            <GridCol>
                                <label>Role</label>
                                <TextBox value={role.name} onChange={this.roleName(idx)} autoFocus={role.key === this.state.focus}/>
                            </GridCol>
                        </GridRow>
                    </GridSection>
                ))}
            </GridForm>
        )
    }
}

Bu şekilde metin kutularının hiçbiri sayfa yüklemesine odaklanamaz (istediğim gibi), ancak yeni bir kayıt oluşturmak için "Ekle" düğmesine bastığınızda yeni kayıt odaklanır.

Dan beri autoFocus değil bileşen remounted verilmezse "run" yine, unsetting zahmet gerekmez this.state.focus(ı diğer durumlarını düzelterek olarak yani o odak geri çalmak tutmaz).

Hemen hemen tüm cevabı oku ama görmedim getRenderedComponent().props.input

Metin girişi referanslarınızı ayarlama

this.refs.username.getRenderedComponent().props.input.onChange('');

Yukarıdaki bir çok seçeneği denedikten sonra hiçbir başarı ile denedim disablingsonra ben olduğumu ve sonra enablingodak kaybına neden girdi olduğunu gördüm .

Ben sendingAnswerarka uç yoklama sırasında Giriş devre dışı bırakacak bir pervane vardı .

<Input
  autoFocus={question}
  placeholder={
    gettingQuestion ? 'Loading...' : 'Type your answer here...'
  }
  value={answer}
  onChange={event => dispatch(updateAnswer(event.target.value))}
  type="text"
  autocomplete="off"
  name="answer"
  // disabled={sendingAnswer} <-- Causing focus to be lost.
/>

Engelli pervane kaldırıldıktan sonra her şey tekrar çalışmaya başladı.

Buradan kontrol edebileceğiniz güncellenmiş sürüm

componentDidMount() {

    // Focus to the input as html5 autofocus
    this.inputRef.focus();

}
render() {
    return <input type="text" ref={(input) => { this.inputRef = input }} />
})

Bu hatanın birçok nedeni olduğundan, karşılaştığım sorunu da yayınlayacağımı düşündüm. Benim için sorun, girdilerimi başka bir bileşenin içeriği olarak oluşturmamdı.

export default ({ Content }) => {
  return (
  <div className="container-fluid main_container">
    <div className="row">
      <div className="col-sm-12 h-100">
        <Content />                                 // I rendered my inputs here
      </div>
    </div>
  </div>
  );
}

Ben yukarıdaki bileşen bu şekilde aradı:

<Component Content={() => {
  return (
    <input type="text"/>
  );
}} />

Güncellenmiş sözdizimine göre şunları kullanabilirsiniz: this.myRref.current.focus()