Apa reaksi reaksi pengaturan fokus pada bidang teks tertentu setelah komponen diberikan?

Dokumentasi tampaknya menyarankan penggunaan referensi, misalnya:

Setel ref="nameInput"pada kolom input saya di fungsi render, lalu panggil:

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

Tapi di mana saya harus memanggil ini? Saya sudah mencoba beberapa tempat tetapi saya tidak bisa membuatnya bekerja.

Anda harus melakukannya componentDidMountdan refs callbacksebagai gantinya. Sesuatu seperti ini

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's jawaban sudah benar, dan untuk kenyamanan Anda dapat menggunakan prop autoFocus untuk memiliki input secara otomatis fokus ketika dipasang:

<input autoFocus name=...

Perhatikan bahwa dalam jsx itu autoFocus( huruf kapital F) tidak seperti html biasa yang tidak peka huruf besar-kecil.

Pada Bereaksi 0,15 , metode yang paling ringkas adalah:

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

Fokus pada mount

Jika Anda hanya ingin memfokuskan suatu elemen saat ia melakukan mount (awalnya membuat), penggunaan sederhana atribut autoFocus akan dilakukan.

<input type="text" autoFocus />

Fokus dinamis

untuk mengontrol fokus secara dinamis, gunakan fungsi umum untuk menyembunyikan detail implementasi dari komponen Anda.

Bereaksi 16.8 + Komponen fungsional - 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 ] 
}

Demo Penuh

Bereaksi 16.3 + Komponen Kelas - utilFocus

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} 
}

Demo Penuh

Jika Anda hanya ingin membuat fokus otomatis di Bereaksi, itu sederhana.

<input autoFocus type="text" />

Sementara jika Anda hanya ingin tahu di mana harus meletakkan kode itu, jawabannya ada di componentDidMount ().

v014.3

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

Dalam kebanyakan kasus, Anda dapat melampirkan referensi ke simpul DOM dan menghindari penggunaan findDOMNode sama sekali.

Baca dokumen API di sini: https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode

Bereaksi 16.3 menambahkan cara mudah baru untuk menangani ini dengan membuat referensi dalam konstruktor komponen dan menggunakannya seperti di bawah ini:

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>
    );
  }
}

Untuk lebih jelasnya, Anda dapat memeriksa artikel ini di React blog.

Memperbarui:

Mulai dari React 16.8 , useRefkait dapat digunakan dalam komponen fungsi untuk mencapai hasil yang sama:

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

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

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

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

Saya baru saja mengalami masalah ini dan saya menggunakan react 15.0.1 15.0.2 dan saya menggunakan sintaks ES6 dan tidak mendapatkan apa yang saya butuhkan dari jawaban lain sejak v.15 turun beberapa minggu yang lalu dan beberapa this.refsproperti sudah ditinggalkan dan dihapus .

Secara umum, yang saya butuhkan adalah:

1. Fokuskan elemen input (bidang) pertama saat komponen dipasang
2. Fokuskan elemen input (bidang) pertama dengan kesalahan (setelah mengirim)

Saya menggunakan:

• Bereaksi Wadah / Komponen Presentasi
• Redux
• Bereaksi-Router

Fokuskan Elemen Input Pertama

Saya menggunakan autoFocus={true}yang pertama<input /> di halaman sehingga ketika komponen mount, itu akan mendapatkan fokus.

Fokuskan Elemen Input Pertama dengan Kesalahan

Ini memakan waktu lebih lama dan lebih berbelit-belit. Saya menyimpan kode yang tidak relevan dengan solusi untuk singkatnya.

Redux Store / Negara

Saya perlu negara global untuk mengetahui apakah saya harus mengatur fokus dan menonaktifkannya ketika sudah diatur, jadi saya tidak terus mengatur ulang fokus saat komponen dirender ulang (saya akan menggunakan componentDidUpdate() untuk memeriksa pengaturan fokus. )

Ini dapat dirancang sesuai keinginan Anda untuk aplikasi Anda.

{
    form: {
        resetFocus: false,
    }
}

Komponen Wadah

Komponen harus memiliki resetfocus set properti dan callBack untuk menghapus properti jika akhirnya menetapkan fokus pada dirinya sendiri.

Juga perhatikan, saya mengatur Pencipta Tindakan saya ke dalam file terpisah sebagian besar karena proyek saya cukup besar dan saya ingin memecahnya menjadi potongan-potongan yang lebih mudah dikelola.

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);

Komponen Presentasi

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
}

Gambaran

Gagasan umum adalah bahwa setiap bidang formulir yang bisa memiliki kesalahan dan menjadi fokus perlu memeriksa sendiri dan jika perlu mengatur fokus pada dirinya sendiri.

Ada logika bisnis yang perlu terjadi untuk menentukan apakah bidang yang diberikan adalah bidang yang tepat untuk menetapkan fokus. Ini tidak ditampilkan karena akan tergantung pada aplikasi individual.

Saat formulir dikirimkan, acara itu perlu mengatur bendera fokus global resetFocusmenjadi true. Kemudian ketika masing-masing komponen memperbarui sendiri, itu akan melihat bahwa itu harus memeriksa untuk melihat apakah itu mendapatkan fokus dan jika ya, mengirimkan acara untuk mengatur ulang fokus sehingga elemen lain tidak harus terus memeriksa.

sunting Sebagai catatan tambahan, saya memiliki logika bisnis saya dalam file "utilitas" dan saya baru saja mengekspor metode dan menyebutnya dalam setiapshouldfocus() metode.

Bersulang!

Dokumen Bereaksi sekarang memiliki bagian untuk ini. 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();
        }
      }} />
    );
  },

Ini bukan lagi jawaban terbaik. Pada v0.13, this.refsmungkin tidak tersedia sampai SETELAH componentDidMount()berjalan, dalam beberapa kasus aneh.

Cukup tambahkan autoFocustag ke bidang input Anda, seperti yang ditampilkan FakeRainBrigand di atas.

Ref. @ Dave mengomentari jawaban @ Dhiraj; alternatifnya adalah dengan menggunakan fungsi callback dari atribut ref pada elemen yang diberikan (setelah komponen merender terlebih dahulu):

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

Info lebih lanjut

Ini cara yang tepat, cara autofocus. Ketika Anda menggunakan callback alih-alih string sebagai nilai ref, itu secara otomatis dipanggil. Anda mendapatkan referensi Anda tersedia daripada tanpa perlu menyentuh DOM menggunakangetDOMNode

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

Perhatikan bahwa tidak ada jawaban ini yang berfungsi untuk saya dengan komponen TextField material-ui . Per Bagaimana mengatur fokus ke TextUIField materialUI? Saya harus melompati beberapa rintangan agar ini berhasil:

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

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

Anda dapat menempatkan pemanggilan metode di dalam fungsi render. Atau di dalam metode siklus hidup,componentDidUpdate

Kamu tidak perlu getInputDOMNode?? pada kasus ini...

Cukup dengan refdan focus()ketika komponen di-mount - 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 bekerja paling baik untuk saya. Saya perlu mengubah beberapa teks menjadi input dengan teks itu pada klik ganda jadi inilah yang saya akhirnya dapatkan:

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

CATATAN: Untuk memperbaiki masalah di mana Bereaksi menempatkan tanda sisipan di awal teks gunakan metode ini:

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

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

Saya memiliki masalah yang sama tetapi saya memiliki beberapa animasi juga, jadi kolega saya menyarankan untuk menggunakan window.requestAnimationFrame

ini adalah atribut ref dari elemen saya:

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

Peringatan: ReactDOMComponent: Jangan mengakses .getDOMNode () dari simpul DOM; sebagai gantinya, gunakan node secara langsung. Node DOM ini diberikan oleh App.

Seharusnya

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

Jawaban paling sederhana adalah menambahkan ref = "some name" di elemen teks input dan memanggil fungsi di bawah ini.

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

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

Untuk memindahkan fokus ke elemen yang baru dibuat, Anda dapat menyimpan ID elemen dalam keadaan dan menggunakannya untuk mengatur autoFocus. misalnya

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>
        )
    }
}

Dengan cara ini, tidak ada kotak teks yang fokus pada pemuatan halaman (seperti yang saya inginkan), tetapi ketika Anda menekan tombol "Tambah" untuk membuat catatan baru, maka catatan baru itu akan fokus.

Karena autoFocustidak "berjalan" lagi kecuali komponennya di-remount, saya tidak perlu repot-repot untuk tidak menyetel this.state.focus(yaitu tidak akan mencuri kembali fokus ketika saya memperbarui status lainnya).

Baca hampir semua jawabannya tetapi tidak melihat getRenderedComponent().props.input

Atur referensi input teks Anda

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

Setelah mencoba banyak opsi di atas tanpa hasil, saya menemukan bahwa itu seperti saya disablingdan kemudian enablinginput yang menyebabkan fokus menjadi hilang.

Saya punya prop sendingAnsweryang akan menonaktifkan Input saat saya sedang polling backend.

<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.
/>

Setelah saya menghapus prop yang dinonaktifkan semuanya mulai bekerja lagi.

Versi yang diperbarui dapat Anda periksa di sini

componentDidMount() {

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

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

Karena ada banyak alasan untuk kesalahan ini, saya berpikir bahwa saya juga akan memposting masalah yang saya hadapi. Bagi saya, masalahnya adalah saya memberikan input sebagai konten dari komponen lain.

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>
  );
}

Ini adalah cara saya menyebut komponen di atas:

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

Menurut sintaks yang diperbarui, Anda dapat menggunakan this.myRref.current.focus()