วิธีการตอบสนองของการตั้งค่าการมุ่งเน้นไปที่ช่องข้อความเฉพาะหลังจากที่มีการแสดงองค์ประกอบ?

เอกสารดูเหมือนว่าจะแนะนำให้ใช้ refs เช่น:

ตั้งค่าref="nameInput"ในฟิลด์อินพุตของฉันในฟังก์ชั่นการแสดงผลแล้วโทร:

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

แต่ฉันจะเรียกสิ่งนี้ได้ที่ไหน ฉันลองไปหลายที่แล้วแต่ไม่สามารถใช้งานได้

คุณควรทำในcomponentDidMountและrefs callbackแทน บางสิ่งเช่นนี้

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 ถูกต้องและเพื่อความสะดวกคุณสามารถใช้ autoFocus prop เพื่อให้อินพุตโฟกัสอัตโนมัติเมื่อติดตั้ง:

<input autoFocus name=...

โปรดทราบว่าใน jsx มันเป็นautoFocus(ตัวพิมพ์ใหญ่ F) ซึ่งแตกต่างจาก html เก่าธรรมดาซึ่งไม่ตรงตามตัวพิมพ์ใหญ่ - เล็ก

ตั้งแต่ React 0.15วิธีที่รัดกุมที่สุดคือ:

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

มุ่งเน้นไปที่ภูเขา

หากคุณเพียงต้องการที่จะมุ่งเน้นองค์ประกอบเมื่อมัน mounts (เริ่มต้นแสดงผล) การใช้งานง่าย ๆ ของคุณลักษณะโฟกัสอัตโนมัติจะทำ

<input type="text" autoFocus />

โฟกัสแบบไดนามิก

เพื่อควบคุมการโฟกัสให้ใช้ฟังก์ชันทั่วไปแบบไดนามิกเพื่อซ่อนรายละเอียดการใช้งานจากส่วนประกอบของคุณ

ทำปฏิกิริยา 16.8 + องค์ประกอบการใช้งาน - ใช้ตะขอโฟกัส

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

การสาธิตเต็มรูปแบบ

ทำปฏิกิริยา 16.3 + ส่วนประกอบระดับ - ใช้ประโยชน์จากโฟกัส

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

การสาธิตเต็มรูปแบบ

ถ้าคุณแค่ต้องการโฟกัสอัตโนมัติใน React มันก็ง่าย

<input autoFocus type="text" />

ในขณะที่ถ้าคุณเพียงต้องการทราบว่าจะวางรหัสนั้นคำตอบอยู่ใน componentDidMount ()

v014.3

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

ในกรณีส่วนใหญ่คุณสามารถแนบ ref กับโหนด DOM และหลีกเลี่ยงการใช้ findDOMNode เลย

อ่านเอกสาร API ได้ที่นี่: https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode

React 16.3 ได้เพิ่มวิธีที่สะดวกใหม่ในการจัดการสิ่งนี้โดยการสร้างตัวอ้างอิงของส่วนประกอบและใช้มันตามด้านล่าง:

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

สำหรับรายละเอียดเพิ่มเติมคุณสามารถตรวจสอบบทความนี้ในบล็อกตอบโต้

ปรับปรุง:

เริ่มต้นจากการทำปฏิกิริยา16.8 , useRefตะขอสามารถนำมาใช้ในส่วนฟังก์ชั่นเพื่อให้บรรลุผลเดียวกัน:

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

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

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

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

ฉันเพิ่งพบปัญหานี้และฉันใช้ react 15.0.1 15.0.2 และฉันใช้ไวยากรณ์ ES6 และไม่ได้รับสิ่งที่ฉันต้องการจากคำตอบอื่น ๆ ตั้งแต่ v.15 ลดลงเมื่อหลายสัปดาห์ก่อนและthis.refsคุณสมบัติบางอย่างถูกเลิกใช้และลบออก

โดยทั่วไปสิ่งที่ฉันต้องการคือ:

1. มุ่งเน้นองค์ประกอบอินพุต (ฟิลด์) แรกเมื่อส่วนประกอบเมาท์
2. มุ่งเน้นองค์ประกอบอินพุต (ฟิลด์) แรกที่มีข้อผิดพลาด (หลังจากส่ง)

ฉันกำลังใช้:

• ทำปฏิกิริยาคอนเทนเนอร์ / ส่วนประกอบการนำเสนอ
• Redux
• ตอบสนอง-Router

มุ่งเน้นองค์ประกอบอินพุตแรก

ฉันใช้autoFocus={true}ครั้งแรก<input />ในหน้าเพื่อที่ว่าเมื่อเมาท์ส่วนประกอบจะได้รับโฟกัส

โฟกัสองค์ประกอบอินพุตแรกโดยมีข้อผิดพลาด

สิ่งนี้ใช้เวลานานกว่าและมีความซับซ้อนมากกว่า ฉันกำลังเขียนโค้ดที่ไม่เกี่ยวข้องกับวิธีแก้ปัญหาสั้น ๆ

ร้านค้า / รัฐ Redux

ฉันต้องการสถานะส่วนกลางเพื่อทราบว่าฉันควรตั้งโฟกัสและปิดการใช้งานเมื่อตั้งค่าหรือไม่ดังนั้นฉันจึงไม่ตั้งค่าโฟกัสใหม่เมื่อองค์ประกอบแสดงผลอีกครั้ง (ฉันจะใช้componentDidUpdate()เพื่อตรวจสอบการตั้งโฟกัส )

สามารถออกแบบได้ตามที่คุณเห็นว่าเหมาะสมกับแอปพลิเคชันของคุณ

{
    form: {
        resetFocus: false,
    }
}

ส่วนประกอบคอนเทนเนอร์

องค์ประกอบจะต้องมีresetfocusชุดคุณสมบัติและ callBack เพื่อล้างคุณสมบัติถ้ามันจบลงด้วยการตั้งค่าโฟกัสในตัวเอง

โปรดทราบว่าฉันจัดระเบียบผู้สร้าง Action ของฉันเป็นไฟล์แยกส่วนใหญ่เนื่องจากโครงการของฉันค่อนข้างใหญ่และฉันต้องการที่จะแบ่งพวกเขาออกเป็นกลุ่มที่จัดการได้มากขึ้น

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

องค์ประกอบการนำเสนอ

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
}

ภาพรวม

แนวคิดทั่วไปคือแต่ละเขตข้อมูลฟอร์มที่อาจมีข้อผิดพลาดและมีสมาธิต้องตรวจสอบตัวเองและหากจำเป็นต้องตั้งค่าโฟกัสเอง

มีตรรกะทางธุรกิจที่ต้องเกิดขึ้นเพื่อตรวจสอบว่าเขตข้อมูลที่กำหนดเป็นเขตข้อมูลที่ถูกต้องเพื่อกำหนดโฟกัส สิ่งนี้ไม่แสดงขึ้นอยู่กับแอพพลิเคชั่นแต่ละตัว

เมื่อส่งแบบฟอร์มเหตุการณ์นั้นต้องตั้งค่าสถานะการโฟกัสทั่วโลกresetFocusเป็นจริง จากนั้นเมื่อแต่ละองค์ประกอบอัปเดตตัวเองมันจะเห็นว่ามันควรตรวจสอบเพื่อดูว่ามันได้รับโฟกัสและถ้ามันจะส่งเหตุการณ์เพื่อรีเซ็ตโฟกัสเพื่อให้องค์ประกอบอื่น ๆ ไม่จำเป็นต้องตรวจสอบ

แก้ไข เป็นบันทึกข้างฉันมีตรรกะทางธุรกิจของฉันในไฟล์ "ยูทิลิตี้" และฉันเพิ่งส่งออกวิธีการและเรียกมันว่าในแต่ละshouldfocus()วิธี

ไชโย!

เอกสารตอบโต้ตอนนี้มีส่วนสำหรับสิ่งนี้ 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();
        }
      }} />
    );
  },

นี่ไม่ใช่คำตอบที่ดีที่สุดอีกต่อไป ตั้งแต่ v0.13 this.refsอาจไม่สามารถใช้งานได้จนกว่าจะcomponentDidMount()รันหลังจากนั้นในบางกรณีที่แปลก

เพียงเพิ่มautoFocusแท็กในฟิลด์อินพุตของคุณเนื่องจาก FakeRainBrigand แสดงอยู่ด้านบน

อ้าง @ ความคิดเห็นของ Dave เกี่ยวกับคำตอบของ @ Dhiraj; อีกทางเลือกหนึ่งคือการใช้ฟังก์ชันการเรียกกลับของแอตทริบิวต์ ref ในองค์ประกอบที่แสดงผล

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

ข้อมูลเพิ่มเติม

นี่เป็นวิธีที่เหมาะสมวิธีการโฟกัสอัตโนมัติ เมื่อคุณใช้โทรกลับแทนสตริงเป็นค่าอ้างอิงมันจะถูกเรียกโดยอัตโนมัติ คุณได้รับการอ้างอิงของคุณมากกว่าโดยไม่จำเป็นต้องแตะ DOM โดยใช้getDOMNode

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

หมายเหตุว่าไม่มีคำตอบเหล่านี้ทำงานให้ฉันด้วยองค์ประกอบ TextField วัสดุ UI ต่อวิธีการโฟกัสไปยังชุด materialUI TextField? ฉันต้องกระโดดข้ามห่วงเพื่อให้ได้งานนี้:

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

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

คุณสามารถวางการเรียกเมธอดนั้นไว้ในฟังก์ชั่นการเรนเดอร์ หรือภายในวิธีวงจรชีวิตcomponentDidUpdate

คุณไม่ต้องการ getInputDOMNode ?? ในกรณีนี้...

เพียงแค่รับrefและfocus()เมื่อองค์ประกอบได้รับการติดตั้ง - 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'));

ออโต้โฟกัสทำงานได้ดีที่สุดสำหรับฉัน ฉันต้องการเปลี่ยนข้อความเป็นอินพุตด้วยข้อความนั้นในการคลิกสองครั้งดังนั้นนี่คือสิ่งที่ฉันจบลงด้วย:

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

หมายเหตุ: เมื่อต้องการแก้ไขปัญหาที่ React วางเครื่องหมายรูปหมวกที่จุดเริ่มต้นของข้อความใช้วิธีนี้:

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

พบได้ที่นี่: https://coderwall.com/p/0iz_zq/how-to-put-focus-at-the-end-of-an-input-with-react-js

ฉันมีปัญหาเดียวกัน แต่ฉันก็มีภาพเคลื่อนไหวด้วยดังนั้นเพื่อนร่วมงานของฉันแนะนำให้ใช้ window.requestAnimationFrame

นี่คือคุณลักษณะการอ้างอิงขององค์ประกอบของฉัน:

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

คำเตือน: ReactDOMComponent: ห้ามเข้าถึง. getDOMNode () ของโหนด DOM ให้ใช้โหนดโดยตรงแทน โหนด DOM Appนี้ถูกแสดงโดย

ควรจะเป็น

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

คำตอบที่ง่ายที่สุดคือการเพิ่ม ref = "some name" ในองค์ประกอบข้อความอินพุตและเรียกใช้ฟังก์ชันด้านล่าง

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

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

เพื่อย้ายโฟกัสไปเป็นองค์ประกอบที่สร้างขึ้นใหม่คุณสามารถเก็บองค์ประกอบ ID autoFocusในรัฐและใช้ในการตั้งค่า เช่น

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

วิธีนี้ไม่มีกล่องข้อความที่จะได้รับการมุ่งเน้นไปที่การโหลดหน้าเว็บ (เช่นฉันต้องการ) แต่เมื่อคุณกดปุ่ม "เพิ่ม" เพื่อสร้างบันทึกใหม่แล้วบันทึกใหม่ที่ได้รับการมุ่งเน้น

เนื่องจากautoFocusไม่ "เรียกใช้" อีกครั้งเว้นแต่ว่าส่วนประกอบจะถูกประกอบใหม่ฉันไม่ต้องกังวลกับการตั้งค่าใหม่this.state.focus(นั่นคือมันจะไม่ขโมยโฟกัสกลับไปเมื่อฉันอัปเดตสถานะอื่น ๆ )

อ่านคำตอบเกือบทั้งหมด แต่ไม่เห็น getRenderedComponent().props.input

ตั้งค่าการป้อนข้อความของคุณ

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

หลังจากลองตัวเลือกมากมายด้านบนโดยไม่ประสบความสำเร็จฉันก็พบว่ามันเป็นอย่างที่ฉันเป็นdisablingและจากนั้นenablingอินพุตที่ทำให้โฟกัสหายไป

ฉันมีเสาsendingAnswerซึ่งจะปิดการใช้งานการป้อนข้อมูลในขณะที่ฉันกำลังสำรวจส่วนหลัง

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

เมื่อฉันลบเสาปิดการใช้งานทุกอย่างเริ่มทำงานอีกครั้ง

อัปเดตเวอร์ชันที่คุณสามารถตรวจสอบได้ที่นี่

componentDidMount() {

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

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

เนื่องจากมีหลายเหตุผลสำหรับข้อผิดพลาดนี้ฉันคิดว่าฉันจะโพสต์ปัญหาที่ฉันเผชิญ สำหรับฉันปัญหาคือว่าฉันแสดงผลอินพุตของฉันเป็นเนื้อหาขององค์ประกอบอื่น

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

นี่คือวิธีที่ฉันเรียกว่าองค์ประกอบด้านบน:

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

ตามไวยากรณ์ที่อัปเดตแล้วคุณสามารถใช้ this.myRref.current.focus()