javascript - रेंडर के बाद इनपुट पर ध्यान दें




reactjs (16)

चेतावनी: ReactDOMComponent: एक DOM नोड का .getDOMNode () एक्सेस न करें; इसके बजाय, नोड का सीधे उपयोग करें। यह DOM नोड App द्वारा प्रस्तुत किया गया था।

होना चाहिए

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

घटक के प्रतिपादन के बाद किसी विशेष पाठ क्षेत्र पर ध्यान केंद्रित करने का प्रतिक्रिया तरीका क्या है?

प्रलेखन का उपयोग करने के लिए रेफरी का सुझाव लगता है, जैसे:

रेंडर फ़ंक्शन में मेरे इनपुट फ़ील्ड पर ref="nameInput" सेट करें, और फिर कॉल करें:

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

लेकिन मैं इसे कहां बुलाऊं? मैंने कुछ स्थानों की कोशिश की है, लेकिन मैं इसे काम नहीं कर सकता।


माउंट पर ध्यान दें

यदि आप केवल एक तत्व पर ध्यान केंद्रित करना चाहते हैं जब वह आरोहित करता है (शुरुआत में) ऑटोफोकस विशेषता का एक सरल उपयोग करेगा।

<input autoFocus type="text" />

इंटरएक्टिव फोकस

अपने घटकों से डोम और ब्राउज़र कार्यान्वयन विवरण छिपाने के लिए फ़ोकस रचना का उपयोग सशर्त रूप से नियंत्रित करने के लिए करें।

प्रतिक्रिया 16.8 + कार्यात्मक घटक - उपयोगफोकस हुक

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

फिर इसे किसी भी कार्यात्मक घटक में उपयोग करें।

<input type="text" autoFocus />

Demo

प्रतिक्रिया 16.3 + कक्षा अवयव - उपयोगफोकस

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

    return [ setFocus, htmlElRef ] 
}

फिर किसी भी वर्ग घटक में इसका उपयोग करें

const FocusDemo = () => {

    const [value, setValue] = useState("")
    const [setInputFocus, inputRef] = useFocus()
    const [setBtnFocus, btnRef] = useFocus()

    return (
        <> {/* React.Fragment */}

            <input
                value={value}
                onChange={(e)=>{
                    setValue(e.target.value)
                    if ( some logic ){ setBtnFocus() }
                }}
                ref={inputRef}
            />

            <button 
               onClick={setInputFocus}
               ref={btnRef}
            >
               Refocus
            </button>

        </>
    )

}

Demo


अपडेट किया गया संस्करण आप यहां देख सकते हैं

componentDidMount() {

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

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

आप रेंडर फंक्शन के अंदर उस मेथड कॉल को डाल सकते हैं। या जीवन चक्र विधि के अंदर, componentDidUpdate


आपको इसे 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>


एक नए बनाए गए तत्व पर ध्यान केंद्रित करने के लिए, आप राज्य में तत्व की आईडी को स्टोर कर सकते हैं और इसे autoFocus सेट करने के लिए उपयोग कर autoFocus । जैसे

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

इस तरह से किसी भी टेक्स्टबॉक्स को पेज लोड (जैसे मैं चाहता हूं) पर फोकस नहीं मिलता है, लेकिन जब आप एक नया रिकॉर्ड बनाने के लिए "एड" बटन दबाते हैं, तो उस नए रिकॉर्ड पर फोकस हो जाता है।

चूंकि autoFocus फिर से "रन" नहीं करता है, जब तक कि घटक को this.state.focus नहीं किया जाता है, तो मुझे इसे परेशान करने की ज़रूरत नहीं है। यह this.state.focus (जैसे कि मैं अन्य राज्यों को अपडेट करता हूं) यह ध्यान वापस चोरी नहीं रखेगा।


चूंकि इस त्रुटि के कई कारण हैं, इसलिए मैंने सोचा था कि मैं जिस समस्या का सामना कर रहा हूं, उसे भी पोस्ट करूंगा। मेरे लिए, समस्या यह थी कि मैंने अपने इनपुट को दूसरे घटक की सामग्री के रूप में प्रस्तुत किया।

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

ध्यान दें कि इनमें से किसी भी उत्तर ने मेरे लिए सामग्री-यूई टेक्स्टफिल्ड घटक के साथ काम नहीं किया। कैसे एक सामग्री के लिए ध्यान केंद्रित करने के लिए सेट करें TextField? मुझे यह काम करने के लिए कुछ हुप्स के माध्यम से कूदना पड़ा:

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

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

बिना किसी सफलता के ऊपर दिए गए बहुत सारे विकल्पों की कोशिश करने के बाद मैंने पाया है कि जैसा कि मैं disabling रहा था और फिर इनपुट को enabling किया enabling फोकस खो गया।

मेरे पास एक प्रोप sendingAnswer था। मैं बैकएंड को sendingAnswer करते समय इनपुट को निष्क्रिय कर देता था।

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

एक बार जब मैंने विकलांगों को हटा दिया तो सब कुछ फिर से काम करने लगा।


मेरे पास एक ही समस्या है, लेकिन मेरे पास कुछ एनीमेशन भी हैं, इसलिए मेरे सहयोगी ने खिड़की का उपयोग करने का सुझाव दिया ।requestAnimationFrame

यह मेरे तत्व की रेफरी विशेषता है:

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

यदि आप सिर्फ रिएक्ट में ऑटोफोकस बनाना चाहते हैं, तो यह आसान है।

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

    return {setFocus, ref} 
}

यदि आप सिर्फ यह जानना चाहते हैं कि उस कोड को कहां रखा जाए, तो इसका जवाब घटकवार्डमाउंट () में है।

v014.3

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

  render(){
    return (
      <> {/* React.Fragment */}

          <input
              value={value}
              onChange={(e)=>{
                  setValue(e.target.value)
                  if ( some logic ){ this.BtnFocus.setFocus() }
              }}
              ref={this.input1Focus.ref}
          />

          <button 
             onClick={this.input1Focus.setFocus()}
             ref={this.BtnFocus.ref}
          >
             Refocus
          </button>

      </>
    )
  } 
}

ज्यादातर मामलों में, आप DOM नोड में एक रेफरी संलग्न कर सकते हैं और findDOMNode का उपयोग करने से बिल्कुल भी बच सकते हैं।

यहां एपीआई दस्तावेज़ पढ़ें: https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode


यह उचित तरीका है, ऑटोफोकस कैसे करें। जब आप रिफ़ मान के रूप में स्ट्रिंग के बजाय कॉलबैक का उपयोग करते हैं, तो इसे स्वचालित रूप से कहा जाता है। आप getDOMNode का उपयोग करके DOM को छूने की आवश्यकता के बिना अपना getDOMNode

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


लगभग सभी जवाब पढ़ें लेकिन एक getRenderedComponent().props.input

अपना टेक्स्ट इनपुट Refs सेट करें

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


सबसे सरल उत्तर इनपुट पाठ तत्व में Ref = "कुछ नाम" जोड़कर नीचे दिए गए फ़ंक्शन को कॉल करें।

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

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

0.15 अभिक्रिया के अनुसार , सबसे संक्षिप्त विधि है:

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




reactjs