React.js - इनपुट रेंडरिंग के दौरान फ़ोकस खोने पर

Question

मैं सिर्फ टेक्स्ट इनपुट और onChangeईवेंट आई कॉल में लिख रहा हूं setState, इसलिए रिएक्ट मेरे यूआई को रेंडर करता है। समस्या यह है कि पाठ इनपुट हमेशा एक फोकस खो देता है, इसलिए मुझे प्रत्येक पत्र के लिए इसे फिर से ध्यान केंद्रित करने की आवश्यकता है: डी।

var EditorContainer = React.createClass({

    componentDidMount: function () {
        $(this.getDOMNode()).slimScroll({height: this.props.height, distance: '4px', size: '8px'});
    },

    componentDidUpdate: function () {
        console.log("zde");
        $(this.getDOMNode()).slimScroll({destroy: true}).slimScroll({height: 'auto', distance: '4px', size: '8px'});
    },

    changeSelectedComponentName: function (e) {
        //this.props.editor.selectedComponent.name = $(e.target).val();
        this.props.editor.forceUpdate();
    },

    render: function () {

        var style = {
            height: this.props.height + 'px'
        };
        return (
            <div className="container" style={style}>
                <div className="row">
                    <div className="col-xs-6">
                    {this.props.selected ? <h3>{this.props.selected.name}</h3> : ''}
                    {this.props.selected ? <input type="text" value={this.props.selected.name} onChange={this.changeSelectedComponentName} /> : ''}
                    </div>
                    <div className="col-xs-6">
                        <ComponentTree editor={this.props.editor} components={this.props.components}/>
                    </div>
                </div>
            </div>
        );
    }

});

Comments

एकमात्र कारण जो होता है वह यह है कि क) कुछ और ध्यान चुराता है, या ख) इनपुट टिमटिमा रहा है। क्या आप समस्या को दर्शाने वाला jsfiddle / jsbin प्रदान कर सकते हैं? यहाँ आधार प्रतिक्रिया jsbin है ।

— ब्रिगैंड

lol ... अच्छी तरह से यह थोड़ा परेशान करने वाला लगता है: P jquery के साथ मैं नए रेंडर किए गए इनपुटफेल्ड के लिए एक पहचानकर्ता सेट करूंगा और फिर उस पर ध्यान केंद्रित करूंगा। यह सुनिश्चित नहीं है कि कोड सादे जेएस में कैसे दिखेगा। लेकिन मुझे यकीन है कि आप इसे कर सकते हैं :)

— Medda86

@FakeRainBrigand: झिलमिलाहट से आपका क्या मतलब है?

— क्रैब

@ क्रैब, जैसे कि अगर यह। क्रॉपसेलेक्ट किया गया गलत हो रहा था, और फिर फिर से सच हो रहा था। इससे इनपुट अनमाउंट हो जाएगा, और फिर फिर से माउंट होगा।

— ब्रिगैंड

@ क्रैब, स्लिमस्क्रोल लाइनों को हटाने का प्रयास करें; कि कुछ अजीब हो सकता है कि समस्याओं का कारण है।

— ब्रिगैंड

Answer 1

आपके बाकी कोड को देखे बिना, यह एक अनुमान है। जब आप EditorContainer बनाते हैं, तो घटक के लिए एक अद्वितीय कुंजी निर्दिष्ट करें:

<EditorContainer key="editor1"/>

जब पुन: प्रतिपादन होता है, यदि वही कुंजी दिखाई देती है, तो यह बताएगा कि रिएक्ट क्लब्बर नहीं है और दृश्य को पुन: उत्पन्न करता है, इसके बजाय पुन: उपयोग करें। फिर केंद्रित वस्तु को फोकस बनाए रखना चाहिए।

Comments

इसने एक इनपुट फॉर्म वाले उप-घटक को प्रस्तुत करने के साथ मेरी समस्या को हल किया। लेकिन मेरे मामले में मुझे इसके विपरीत की आवश्यकता थी - जब मैं चाहता था तब फॉर्म फिर से प्रस्तुत नहीं किया गया था। मुख्य विशेषता को जोड़ने का काम किया।

— सैम टेक्सास

इनपुट में कुंजी जोड़ने से कोई

— फायदा

हो सकता है कि आपके इनपुट वाले घटक (ओं) को भी पुनः प्रदान किया गया हो। संलग्नक घटकों पर कुंजियों की जाँच करें।

— पेट्र ग्लैडिख

@PetrGladkikh द्वारा टिप्पणी को अपवोट करें। मुझे सभी संलग्न घटकों पर कुंजियों की आवश्यकता थी।

— ब्रायन क्रैगुन

Answer 2

मैं बार-बार यहाँ वापस आता रहता हूँ और हमेशा अपने समाधान को कहीं और पाता हूँ। इसलिए, मैं इसे यहाँ दस्तावेज़ करूँगा क्योंकि मुझे पता है कि मैं इसे फिर से भूल जाऊंगा!

कारण inputमेरे मामले में ध्यान खो रहा था इस तथ्य के कारण कि मैं inputराज्य परिवर्तन पर फिर से प्रतिपादन कर रहा था ।

छोटी गाड़ी कोड:

import React from 'react';
import styled from 'styled-components';

class SuperAwesomeComp extends React.Component {
  state = {
    email: ''
  };
  updateEmail = e => {
    e.preventDefault();
    this.setState({ email: e.target.value });
  };
  render() {
    const Container = styled.div``;
    const Input = styled.input``;
    return (
      <Container>
        <Input
          type="text"
          placeholder="Gimme your email!"
          onChange={this.updateEmail}
          value={this.state.email}
        />
      </Container>
    )
  }
}

तो, समस्या यह है कि मैं हमेशा जल्दी से परीक्षण करने के लिए एक जगह पर सब कुछ कोड करना शुरू कर देता हूं और बाद में सभी को अलग-अलग मॉड्यूल में तोड़ देता हूं। लेकिन, यहाँ यह रणनीति बैकफ़ायर करती है क्योंकि इनपुट परिवर्तन पर राज्य को अपडेट करने से फ़ंक्शन को रेंडर किया जाता है और फ़ोकस खो जाता है।

फिक्स सरल है, शुरुआत से ही मॉडर्लाइजेशन करें, दूसरे शब्दों में, " Inputघटक को renderफ़ंक्शन से बाहर ले जाएं "

निश्चित कोड

import React from 'react';
import styled from 'styled-components';

const Container = styled.div``;
const Input = styled.input``;

class SuperAwesomeComp extends React.Component {
  state = {
    email: ''
  };
  updateEmail = e => {
    e.preventDefault();
    this.setState({ email: e.target.value });
  };
  render() {
    return (
      <Container>
        <Input
          type="text"
          placeholder="Gimme your email!"
          onChange={this.updateEmail}
          value={this.state.email}
        />
      </Container>
    )
  }
}

संदर्भ। हल करने के लिए: https://github.com/styled-compenders/styled-compenders/issues/540#issuecomment-283664947

Comments

मैं रेंडर फ़ंक्शन के अंदर एक एचओसी का उपयोग कर रहा था, एचओसी कॉल को घटक परिभाषा में स्थानांतरित करना चाल था। किसी तरह इस उत्तर के लिए।

— मार्क ई

मुझे लगता है कि यह मेरी समस्या है, लेकिन मुझे घटकों को बाहर ले जाने में कठिनाई हो रही है render()और class ... extends Componentसंदर्भ के कारण this। जैसेonChange={this.handleInputChange}

— नैटस

रिएक्ट क्लास के घटकों के लिए कहानी का मनोबल, renderफ़ंक्शन के अंदर घटकों को परिभाषित नहीं करते हैं , रिएक्ट कार्यात्मक घटकों के लिए, फ़ंक्शन बॉडी में घटकों को परिभाषित नहीं करते हैं।

— वोंग जिया हौ

धन्यवाद! आपने मेरे बट को बचा लिया !!

— के-सातो

@ नॉटसे मेरा भी वही हाल था। HOC उस renderफ़ंक्शन के अंदर कॉल करता है जिसे 'this.handleChange' विधि से पारित किया जा रहा था और उपयोग किए जाने वाले घटकों को वापस कर दिया। जैसे const TextAreaDataField = TextAreaDataFieldFactory(this.handleChange)। मैंने बस घटक निर्माण को कंस्ट्रक्टर में स्थानांतरित किया और उन्हें renderविधि के रूप में एक्सेस किया this.TextAreaDataField। एक जादू की तरह काम किया।

— मार्कस जूनियस ब्रूटस

Answer 3

यदि यह एक प्रतिक्रिया राउटर के भीतर एक समस्या है तो इसके बजाय प्रोप का <Route/>उपयोग करें ।rendercomponent

<Route path="/user" render={() => <UserPage/>} />

फोकस का नुकसान इसलिए होता है क्योंकि componentप्रोप React.createElementहर बार परिवर्तनों को फिर से प्रस्तुत करने के बजाय हर बार उपयोग करता है ।

यहाँ विवरण: https://reacttraining.com/react-router/web/api/Route/component

Comments

यह अनिवार्य रूप से मेरा मुद्दा था। विशेष रूप से, मैं घटक प्रोप के लिए एक अनाम फ़ंक्शन पास कर रहा था, फोकस-लॉस को ट्रिगर करता है: <Route component={() => <MyComponent/>} />जब मुझे किया जाना चाहिए<Route component={MyComponent} />

— डैनियल

आपने मेरा दिन बचाया - उतना ही सरल!

— फैब्रिकियो

Answer 4

मेरा उत्तर वैसा ही है जैसा @ z5h ने कहा।

मेरे मामले में, मैं Math.random()एक अद्वितीय उत्पन्न करता थाkey घटक के लिए ।

मैंने सोचा था key इसका उपयोग उस सरणी के सभी घटकों को फिर से प्रस्तुत करने के बजाय उस विशेष घटक के लिए एक रेंडरर को ट्रिगर करने के लिए किया जाता है (मैं अपने कोड में घटकों की एक सरणी लौटाता हूं)। मुझे नहीं पता था कि इसका उपयोग राज्य के पुनर्स्थापन के बाद बहाल करने के लिए किया जाता है।

उसे हटाकर मेरे लिए काम किया।

Comments

Npmjs.com/package/shortid जैसा मॉड्यूल भी कुछ इस तरह से संभालने का एक अच्छा तरीका है।

— अक्टूबर

Answer 5

तत्व autoFocusको विशेषता लागू करना उन inputस्थितियों में एक समाधान के रूप में प्रदर्शन कर सकता है जहां केवल एक इनपुट है जिसे ध्यान केंद्रित करने की आवश्यकता है। उस मामले में एक keyविशेषता अनावश्यक होगी क्योंकि यह सिर्फ एक तत्व है और इसके अलावा आपको inputमुख्य घटक के पुन: रेंडर पर ध्यान देने से बचने के लिए तत्व को अपने स्वयं के घटक में तोड़ने के बारे में चिंता नहीं करनी होगी ।

Answer 6

मुझे वही व्यवहार मिला।

मेरे कोड में समस्या यह थी कि मैंने इस तरह से jsx तत्वों का नेस्टेड ऐरे बनाया:

const example = [
            [
                <input value={'Test 1'}/>,
                <div>Test 2</div>,
                <div>Test 3</div>,
            ]
        ]

...

render = () => {
    return <div>{ example }</div>
}

इस नेस्टेड एरे में हर तत्व मूल तत्व को अद्यतन करने पर हर बार पुनः प्रस्तुत करता है। और इसलिए इनपुट्स हर बार "रेफ" प्रोप खो देते हैं

मैंने आंतरिक सरणी को प्रतिक्रिया घटक में बदलने के साथ समस्या को ठीक किया (एक रेंडर फ़ंक्शन के साथ एक फ़ंक्शन)

const example = [
            <myComponentArray />
        ]

 ...

render = () => {
    return <div>{ example }</div>
}

संपादित करें:

जब मैं एक नेस्टेड का निर्माण करता हूं तो यही समस्या दिखाई देती है React.Fragment

const SomeComponent = (props) => (
    <React.Fragment>
        <label ... />
        <input ... />
    </React.Fragment>
);

const ParentComponent = (props) => (
    <React.Fragment>
        <SomeComponent ... />
        <div />
    </React.Fragment>
);

Answer 7

मैं बस इस मुद्दे में भाग गया और मदद के लिए यहां आया। अपने सीएसएस की जाँच करें! इनपुट फ़ील्ड में user-select: none;कोई iPad नहीं हो सकता है या यह काम नहीं करेगा।

Answer 8

मैंने इनपुट और उसके मूल तत्वों में प्रमुख विशेषता को हटाने के लिए एक ही मुद्दा हल किया

// Before
<input
    className='invoice_table-input invoice_table-input-sm'
    type='number'
    key={ Math.random }
    defaultValue={pageIndex + 1}
    onChange={e => {
        const page = e.target.value ? Number(e.target.value) - 1 : 0
        gotoPage(page)
    }}
/>
// After
<input
    className='invoice_table-input invoice_table-input-sm'
    type='number'
    defaultValue={pageIndex + 1}
    onChange={e => {
        const page = e.target.value ? Number(e.target.value) - 1 : 0
        gotoPage(page)
    }}
/>

Answer 9

मेरे लिए, यह खोज इनपुट बॉक्स को उसी घटक में प्रस्तुत किया जा रहा है (जिसे यूजरलिस्ट कहा जाता है) खोज परिणामों की सूची के रूप में। इसलिए जब भी खोज परिणाम बदलते हैं, तो संपूर्ण उपयोगकर्तालिस्ट घटक इनपुट बॉक्स सहित पुन: वितरित हो जाता है।

मेरे समाधान एक नया घटक कहा जाता है का निर्माण करना था UserListSearch जो से अलग है UserList । मुझे काम करने के लिए UserListSearch में इनपुट फ़ील्ड पर कुंजियाँ सेट करने की आवश्यकता नहीं थी। मेरे UsersContainer का रेंडर फंक्शन अब इस तरह दिखता है:

class UserContainer extends React.Component {
  render() {
    return (
      <div>
        <Route
          exact
          path={this.props.match.url}
          render={() => (
            <div>
              <UserListSearch
                handleSearchChange={this.handleSearchChange}
                searchTerm={this.state.searchTerm}
              />
              <UserList
                isLoading={this.state.isLoading}
                users={this.props.users}
                user={this.state.user}
                handleNewUserClick={this.handleNewUserClick}
              />
            </div>
          )}
        />
      </div>  
    )
  }
}

उम्मीद है कि यह किसी को भी मदद करता है।

Answer 10

यदि इनपुट फ़ील्ड किसी अन्य तत्व के अंदर है (जैसे, एक कंटेनर तत्व <div key={"bart"}...><input key={"lisa"}...> ... </input></div>- जैसे कि एलिप्स यहां पर लोप किए गए कोड को इंगित करता है), कंटेनर तत्व (साथ ही इनपुट फ़ील्ड) पर एक अद्वितीय और निरंतर कुंजी होनी चाहिए । एल्विस, रिएक्ट एक नए कंटेनर तत्व को प्रस्तुत करता है जब बच्चे के राज्य को पुराने कंटेनर को फिर से प्रस्तुत करने के बजाय अद्यतन किया जाता है। तार्किक रूप से, केवल बाल तत्व को अद्यतन किया जाना चाहिए, लेकिन ...

मुझे पता लिखने की कोशिश कर रहे एक घटक को लिखने की कोशिश करते समय यह समस्या थी। काम कोड इस तरह दिखता है

// import react, components
import React, { Component } from 'react'

// import various functions
import uuid from "uuid";

// import styles
import "../styles/signUp.css";

export default class Address extends Component {
  constructor(props) {
    super(props);
    this.state = {
      address1: "",
      address2: "",
      address1Key: uuid.v4(),
      address2Key: uuid.v4(),
      address1HolderKey: uuid.v4(),
      address2HolderKey: uuid.v4(),
      // omitting state information for additional address fields for brevity
    };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    event.preventDefault();
    this.setState({ [`${event.target.id}`]: event.target.value })
  }

  render() {
    return (
      <fieldset>
        <div className="labelAndField" key={this.state.address1HolderKey} >
          <label className="labelStyle" for="address1">{"Address"}</label>
          <input className="inputStyle"
            id="address1"
            name="address1"
            type="text"
            label="address1"
            placeholder=""
            value={this.state.address1}
            onChange={this.handleChange}
            key={this.state.address1Key} ></input >
        </div> 
        <div className="labelAndField" key={this.state.address2HolderKey} >
          <label className="labelStyle" for="address2">{"Address (Cont.)"}</label>
          <input className="inputStyle"
            id="address2"
            name="address2"
            type="text"
            label="address2"
            placeholder=""
            key={this.state.address2Key} ></input >
        </div>
        {/* omitting rest of address fields for brevity */}
      </fieldset>
    )
  }
}

तीव्र आंखों वाले पाठक ध्यान देंगे कि <fieldset>यह एक तत्व है, फिर भी इसे एक कुंजी की आवश्यकता नहीं है। वही धारण करता है <>और <React.Fragment>या भी <div>क्यों? हो सकता है कि केवल तत्काल कंटेनर को एक कुंजी की आवश्यकता हो। मुझे नही पता। जैसा कि गणित की पाठ्यपुस्तकें कहती हैं, व्याख्या पाठक को एक अभ्यास के रूप में छोड़ देती है।

Answer 11

मुख्य कारण है: जब रिएक्ट फिर से प्रस्तुत करना होगा, तो आपका पिछला डोम रेफरी अमान्य होगा। इसका मतलब है कि प्रतिक्रिया ने DOM ट्री को बदल दिया है, और आप this.refs.input.focus काम नहीं करेगा, क्योंकि यहाँ इनपुट अब मौजूद नहीं है।

Answer 12

आपूर्ति किए गए जवाबों ने मेरी मदद नहीं की, यहां मैंने जो किया था, लेकिन मेरे पास एक अनोखी स्थिति थी।

जब तक मैं किसी अन्य फ़ाइल में घटक को खींचने के लिए तैयार नहीं हो जाता, तब तक मैं इस प्रारूप का उपयोग करने के लिए कोड को साफ करता हूं।

render(){
   const MyInput = () => {
      return <input onChange={(e)=>this.setState({text: e.target.value}) />
   }
   return(
      <div>
         <MyInput />
      </div>
   )

लेकिन इससे फोकस कम हो गया, जब मैंने कोड को सीधे उस div में लगाया, जहां यह काम करता था।

return(
   <div>
      <input onChange={(e)=>this.setState({text: e.target.value}) />
   </div>
)

मुझे नहीं पता कि यह क्यों है, यह एकमात्र मुद्दा है जो मैंने इसे इस तरह से लिखने के साथ किया है और मैं इसे ज्यादातर फाइलों में रखता हूं, लेकिन अगर कोई भी इसी तरह का काम करता है तो यह फोकस खो देता है।

Answer 13

मुझे एक html तालिका के साथ एक ही समस्या थी जिसमें मुझे एक कॉलम में इनपुट टेक्स्ट लाइनें हैं। एक लूप के अंदर मैंने एक जसन ऑब्जेक्ट पढ़ा और मैं विशेष रूप से उन पंक्तियों को बनाता हूं जिनमें इनपुटटेक्स्ट के साथ एक कॉलम होता है।

http://reactkungfu.com/2015/09/react-js-loses-input-focus-on-typing/

मैं इसे निम्नलिखित तरीके से हल करने में कामयाब रहा

import { InputTextComponent } from './InputTextComponent';
//import my  inputTextComponent 
...

var trElementList = (function (list, tableComponent) {

    var trList = [],
        trElement = undefined,
        trElementCreator = trElementCreator,
        employeeElement = undefined;



    // iterating through employee list and
    // creating row for each employee
    for (var x = 0; x < list.length; x++) {

        employeeElement = list[x];

        var trNomeImpatto = React.createElement('tr', null, <td rowSpan="4"><strong>{employeeElement['NomeTipologiaImpatto'].toUpperCase()}</strong></td>);
        trList.push(trNomeImpatto);

        trList.push(trElementCreator(employeeElement, 0, x));
        trList.push(trElementCreator(employeeElement, 1, x));
        trList.push(trElementCreator(employeeElement, 2, x));

    } // end of for  

    return trList; // returns row list

    function trElementCreator(obj, field, index) {
        var tdList = [],
            tdElement = undefined;

        //my input text
        var inputTextarea = <InputTextComponent
            idImpatto={obj['TipologiaImpattoId']}//index
            value={obj[columns[field].nota]}//initial value of the input I read from my json data source
            noteType={columns[field].nota}
            impattiComposite={tableComponent.state.impattiComposite}
            //updateImpactCompositeNote={tableComponent.updateImpactCompositeNote}
        />

        tdElement = React.createElement('td', { style: null }, inputTextarea);
        tdList.push(tdElement);


        var trComponent = createClass({

            render: function () {
                return React.createElement('tr', null, tdList);
            }
        });
        return React.createElement(trComponent);
    } // end of trElementCreator

});
...    
    //my tableComponent
    var tableComponent = createClass({
        // initial component states will be here
        // initialize values
        getInitialState: function () {
            return {
                impattiComposite: [],
                serviceId: window.sessionStorage.getItem('serviceId'),
                serviceName: window.sessionStorage.getItem('serviceName'),
                form_data: [],
                successCreation: null,
            };
        },

        //read a json data soure of the web api url
        componentDidMount: function () {
            this.serverRequest =
                $.ajax({
                    url: Url,
                    type: 'GET',
                    contentType: 'application/json',
                    data: JSON.stringify({ id: this.state.serviceId }),
                    cache: false,
                    success: function (response) {
                        this.setState({ impattiComposite: response.data });
                    }.bind(this),

                    error: function (xhr, resp, text) {
                        // show error to console
                        console.error('Error', xhr, resp, text)
                        alert(xhr, resp, text);
                    }
                });
        },

        render: function () {
    ...
    React.createElement('table', {style:null}, React.createElement('tbody', null,trElementList(this.state.impattiComposite, this),))
    ...
    }



            //my input text
            var inputTextarea = <InputTextComponent
                        idImpatto={obj['TipologiaImpattoId']}//index
                        value={obj[columns[field].nota]}//initial value of the input I read //from my json data source
                        noteType={columns[field].nota}
                        impattiComposite={tableComponent.state.impattiComposite}//impattiComposite  = my json data source

                    />//end my input text

                    tdElement = React.createElement('td', { style: null }, inputTextarea);
                    tdList.push(tdElement);//add a component

        //./InputTextComponent.js
        import React from 'react';

        export class InputTextComponent extends React.Component {
          constructor(props) {
            super(props);
            this.state = {
              idImpatto: props.idImpatto,
              value: props.value,
              noteType: props.noteType,
              _impattiComposite: props.impattiComposite,
            };
            this.updateNote = this.updateNote.bind(this);
          }

        //Update a inpute text with new value insert of the user

          updateNote(event) {
            this.setState({ value: event.target.value });//update a state of the local componet inputText
            var impattiComposite = this.state._impattiComposite;
            var index = this.state.idImpatto - 1;
            var impatto = impattiComposite[index];
            impatto[this.state.noteType] = event.target.value;
            this.setState({ _impattiComposite: impattiComposite });//update of the state of the father component (tableComponet)

          }

          render() {
            return (
              <input
                className="Form-input"
                type='text'
                value={this.state.value}
                onChange={this.updateNote}>
              </input>
            );
          }
        }

Answer 14

बाहर मुड़ता है मैं thisघटक के लिए बाध्य था जो इसे रेंडर करने के लिए पैदा कर रहा था ।

मुझे लगा कि मैं इसे यहाँ पोस्ट करूँगा जब किसी और के पास यह समस्या होगी।

मुझे बदलना पड़ा

<Field
    label="Post Content"
    name="text"
    component={this.renderField.bind(this)}
/>

सेवा

<Field
    label="Post Content"
    name="text"
    component={this.renderField}
/>

मेरे मामले में के बाद से उन्हें आसानी से ठीक है, मैं वास्तव में जरूरत नहीं थी thisमें renderFieldहै, लेकिन उम्मीद है कि मुझे किसी और इस वसीयत मदद कोई पोस्टिंग।

Answer 15

मैंने valueप्रोप को स्विच किया defaultValue। ये मेरे लिए सही है।

...
// before
<input value={myVar} />

// after
<input defaultValue={myVar} />

Answer 16

मेरी समस्या यह थी कि मैंने अपनी कुंजी को आइटम के मूल्य के साथ गतिशील रूप से नामित किया था, मेरे मामले में "नाम" इसलिए कुंजी कुंजी = { ${item.name}-${index}} थी। इसलिए जब मैं इनपुट को आइटम के रूप में बदलना चाहता था। मान के रूप में, वे कुंजी भी बदलेंगे और इसलिए प्रतिक्रिया उस तत्व को नहीं पहचान सकेगी

Answer 17

मेरे पास यह मुद्दा था और समस्या यह थी कि मैं एक कार्यात्मक घटक का उपयोग कर रहा था और एक मूल घटक के राज्य के साथ जुड़ रहा था। अगर मैंने क्लास कंपोनेंट का उपयोग करने के लिए स्विच किया, तो समस्या दूर हो गई। उम्मीद है कि कार्यात्मक घटकों का उपयोग करते समय इसके चारों ओर एक तरीका है क्योंकि यह साधारण आइटम रेंडरर्स एट अल के लिए बहुत अधिक सुविधाजनक है।

Answer 18

टैग इनपुट में अगला कोड शामिल है:

ref={(input) => {
     if (input) {
         input.focus();
     }
 }}

इससे पहले:

<input
      defaultValue={email}
      className="form-control"
      type="email"
      id="email"
      name="email"
      placeholder={"[e-mail]"}
      maxLength="15"
      onChange={(e) => validEmail(e.target.value)}
/>

उपरांत:

<input
     ref={(input) => {
          if (input) {
             input.focus();
          }
      }}
      defaultValue={email}
      className="form-control"
      type="email"
      id="email"
      name="email"
      placeholder={"[e-mail]"}
      maxLength="15"
      onChange={(e) => validEmail(e.target.value)}
/>