Material-ui: [TextField] रेंडरर पर ध्यान केंद्रित खो देता है

+1

मुझे TextBields को आसानी से काम करने के लिए defaultValue के साथ onBlur इवेंट का उपयोग करना होगा।

किसी को भी यह काम करने के लिए एक समाधान है?

मुझे नहीं लगता कि यह कोई मुद्दा है। नीचे देखें कोड:

//taken from examples/webpack-example

/** In this file, we create a React component which incorporates components provided by material-ui */

const React = require('react');
const RaisedButton = require('material-ui/lib/raised-button');
const TextField = require('material-ui/lib/text-field');
const Dialog = require('material-ui/lib/dialog');
const ThemeManager = require('material-ui/lib/styles/theme-manager');
const LightRawTheme = require('material-ui/lib/styles/raw-themes/light-raw-theme');
const Colors = require('material-ui/lib/styles/colors');

const Main = React.createClass({

  childContextTypes: {
    muiTheme: React.PropTypes.object,
  },

  getInitialState () {
    return {
      muiTheme: ThemeManager.getMuiTheme(LightRawTheme),
      counter: 0,
    };
  },

  getChildContext() {
    return {
      muiTheme: this.state.muiTheme,
    };
  },

  componentWillMount() {
    let newMuiTheme = ThemeManager.modifyRawThemePalette(this.state.muiTheme, {
      accent1Color: Colors.deepOrange500,
    });

    this.setState({muiTheme: newMuiTheme});
  },

  componentDidMount() {
    this.refs.textField.focus();
  },

  render() {

    console.log(this.state.counter);

    let containerStyle = {
      textAlign: 'center',
      paddingTop: '200px',
    };

    let standardActions = [
      { text: 'Okay' },
    ];

    return (
      <div style={containerStyle}>
        <Dialog
          title="Super Secret Password"
          actions={standardActions}
          ref="superSecretPasswordDialog">
          1-2-3-4-5
        </Dialog>

        <h1>material-ui</h1>
        <h2>example project</h2>

        <TextField ref="textField" onChange = {this._incrementStateCounter}/>
        <RaisedButton label="Super Secret Password" primary={true} onTouchTap={this._handleTouchTap} />

      </div>
    );
  },

  _handleTouchTap() {
    this.refs.superSecretPasswordDialog.show();
  },

  _incrementStateCounter () {
    this.setState({counter: this.state.counter + 1});
  },

});

module.exports = Main;

यहां एप्लिकेशन इन एक्शन है (अपडेट स्टेट में कंसोल में लॉग इन किया जा रहा है जैसे टेक्स्टफिल्ड इनपुट परिवर्तन)। आप देख सकते हैं कि TextField ध्यान केंद्रित रखता है:

मुझे अभी भी यह मिलता है। @ shaurya947 उदाहरण ने बग को पुन: प्रस्तुत नहीं किया क्योंकि TextField के पास प्रारंभिक मूल्य संपत्ति नहीं थी।
उपयोग को पुन: पेश करने के लिए
<TextField ref="textField" value={this.state.valueToBeEdited} onChange = {this._incrementStateCounter}/>

या

<TextField ref="textField" defaultValue={this.state.valueToBeEdited} onChange = {this._incrementStateCounter}/>

मैं यह भी देख रहा हूं कि इस मुद्दे का एक प्रतिगमन क्या प्रतीत होता है। मेरे TextFields फिर से प्रस्तुत करने पर ध्यान केंद्रित कर रहे हैं। मैं सेट कर रहा हूं value की प्रोप TextField , तो यह एक नियंत्रित घटक है।

मैं कंसोल में एक नई चेतावनी नोटिस करता हूं: 'TextField को नियंत्रित करने के लिए टाइप टेक्स्ट का अनियंत्रित इनपुट बदल रहा है।' मुझे यह देखकर याद नहीं है कि पहले, यह सुनिश्चित नहीं है कि यह यहां प्रासंगिक है या नहीं। एक बार जब मैं TextField में पहला चरित्र दर्ज करता हूं तो यह चेतावनी दिखाई देती है।

थोड़ा डिबगिंग के माध्यम से, यह प्रतीत होता है कि कुछ TextField का फ़ोकस खोने का कारण बन रहा है। आंतरिक onBlur हैंडलर का आह्वान किया जाता है, जो isFocused TextField झूठी है। अगर मैं onBlur हैंडलर के दौरान document.activeElement लॉग करता हूं (यह निर्धारित करने के लिए कि किस घटक ने फोकस चुराया है) तो यह दस्तावेज़ (रूट) के रूट को लॉग करता है।

मैं यह निर्धारित करके इसे और कम करने में सक्षम था कि धब्बा घटना का स्रोत ऐप में Menu कहीं पहले MenuItem । disableAutoFocus संपत्ति को true मेरी समस्या हल हो गई। मनाइए कि यह किसी और के लिए सहायक हो।

मैंने इसे कैप्चर करने के लिए एक अलग मुद्दा खोला है: # 4387।

मैं पुष्टि कर सकता हूं कि यह अभी भी एक मुद्दा है ...

इसे बहुत ही सरल लॉगिन फ़ॉर्म में देखकर - मैं इसका उपयोग redux फ़ार्म के साथ कर रहा हूँ और जब मैं फॉर्म के साथ इंटरैक्ट करता हूँ तो यह पुनः-रेंडर (redux-form parlance में किसी फ़ील्ड को स्पर्श करने) का कारण बनता है जो फ़ोकस खो देता है।

वर्कअराउंड के रूप में, मैं केवल वास्तविक फॉर्म को फिर से रेंडर कर रहा हूं यदि त्रुटि स्थिति में कोई परिवर्तन हुआ है।

आप Table selectable=true भीतर सेट करके TextField डालकर इस समस्या को आसानी से पुन: उत्पन्न कर सकते हैं। जब भी आप इसे संपादित करना शुरू करने के लिए किसी टेक्स्ट फ़ील्ड पर क्लिक करते हैं, तो लाइन को फ़ोकस मिलेगा, इस प्रकार इसकी पृष्ठभूमि का रंग बदल जाएगा (मुझे लगता है कि कुछ props लाइन का selected=true रूप में सेट किया जा सकता है), इस प्रकार एक फिर से प्रस्तुत करना ट्रिगर, इस प्रकार आप ध्यान खो देंगे ...

तो आप मूल रूप से TextField उपयोग selectable Table भीतर नहीं कर सकते, यकीन है कि यह वैसे भी एक अच्छा UX अभ्यास नहीं है, लेकिन फिर भी :)

हमने देखा कि हमारी परियोजना पर, मैं एक प्रजननकर्ता को आगे बढ़ाने की कोशिश कर सकता हूं।

इसके आसपास कोई काम? एक तालिका के अंदर एक नियमित इनपुट पाठ क्षेत्र का उपयोग करते समय यह भी ध्यान देना।

@ dalexander01 को एक "समाधान" मिला, लेकिन यह बहुत redux-form विशिष्ट लगता है क्योंकि md इनपुट घटकों का उपयोग नहीं करने पर समान समस्या का सामना कर रहा था। अगर इसके किसी उपयोग से मैं स्निपेट पोस्ट कर सकता हूँ!

@deyceg कृपया, यह चोट नहीं कर सकता please। बस <Dialog/> और <TextField/> इस संयोजन के साथ इस समस्या में भाग लें।

      <Dialog
        open={this.props.showDialog}
        title={'New ' + this.props.type}
        autoScrollBodyContent={true}
        actions={actions}
        bodyStyle={styles.dialogContent}
      >
        <SelectField
          name='sub_type'
          value={this.props.top_card.sub_type}
          onChange={(e, k, payload) => this.props.topCardSelectChange('sub_type', payload)}
          floatingLabelText='Type'
        >
          {menuItemsJSX}
        </SelectField>
        <TextField
          name='title'
          className='story-title'
          value={this.props.top_card.title}
          onChange={this.props.topCardChange}
          floatingLabelText='Title'
          fullWidth={true}
          multiLine={true}
          style={styles.title}
        />
        <TextField />
      </Dialog>

मैंने इसे अपने मामले के लिए हल किया है, आपको उस पाठ क्षेत्र को एक अद्वितीय आईडी प्रदान करने की आवश्यकता है।
...
हालांकि फिर से प्रस्तुत करने के बाद आईडी को बदलना नहीं चाहिए। इस तरह रिएक्ट किस तत्व पर केंद्रित था या नहीं इस पर नज़र रख सकते हैं।
पुनश्च मेरे पास एक सरणी में textfields था जो myArray.map के माध्यम से प्रस्तुत किया गया है, वहां आपको रेंडर करने पर समान कुंजी प्रदान करनी होगी।

संपादित करें: मैंने फिर से परीक्षण किया, मेरे "ऐरे" पर "की" होने से रेयरेंडर्स के बीच एक ही समस्या हल हो गई।
टेक्स्टफ़ील्ड आईडी बदल कर शार्ट.गंजेट () हो गई है।

    params.map(function(p,i){
        return(
           <div key={i}>              <--- this will always be the same for this particular row.
               <div className='param-inner'>
                   <TextField id={shortid.generate()} value = {p.value} onChange={this.updateParam.bind(this,i)}/>               <-- id here can be random, but it is necessary to avoid browser warning "we don't have enough information..."
                   </div>
               <div className='param-inner'>{p.unit}</div>
           </div>
        )
    }.bind(this));

कोई भी इस समस्या को हल करने में कामयाब रहा ( refs का उपयोग किए बिना)? यह onChange का संयोजन प्रतीत होता है और value को एक राज्य कुंजी पर सेट करता है जो इनपुट को ढीला फोकस बनाता है।

मेरे पास निम्न समस्या भी थी, मैंने इसे सिलेक्ट किया, हालांकि SelectField कार्यान्वयन लेने से अगर आप इसे आंतरिक रूप से देखते हैं तो एक DropdownMenu https://github.com/callemall/material-ui/blob/ccf712457335087848480709c18c29059542d6aad1/SlectFFF/FlectFMFu पर कॉल कर रहा है

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

हो सकता है कि हम SelectField से एक DropDownMenu घटक को उजागर कर सकते हैं और ऑटोफोकस को प्रॉप्स के साथ अक्षम करने की अनुमति दे सकते हैं।

इसके लिए एक वर्कअराउंड उन लोगों के लिए है जो इसके साथ संघर्ष कर रहे हैं और बस कुछ काम करना चाहते हैं, हालांकि इसकी संभावना कुछ स्थितियों में लागू नहीं हो सकती है और मुद्दों को पेश कर सकती है (हालांकि मैं खुद पूरी तरह से निश्चित नहीं हूं) उदाहरण के लिए एक चर का उपयोग करना है राज्य की तुलना में। इसलिए this.state.value बजाय यह this.value कि onChange अपडेट होगा। घटक में value प्रोप नहीं होगा। फिर onChange हैंडलर पर आप e.target.value उपयोग करेंगे।

अंतर बनाम राज्य के बीच एक अंतर के बारे में मुझे केवल इतना ही पता है कि इंस्टेंस वर्जन री-रेंडर को ट्रिगर नहीं करेगा। हालांकि अन्य कारण भी हो सकते हैं इसलिए मैं उम्मीद कर रहा हूं कि इस पर मेरी सुस्त पकड़ होगी।

फिर भी यह त्रुटि हो रही है। आसपास कोई काम?

मुझे जो वर्कअराउंड मिला, वह था अपने कंपोनेंट के लिए shouldComponentUpdate फंक्शन को ओवरराइड करना और फिर जब मैं अपने टेक्स्टफिल्ड्स द्वारा उपयोग किए जाने वाले स्टेट्स वैल्यू को बदल देता हूं तो वह गलत हो जाता है।

`shouldComponentUpdate(nextProps, nextState) {    

    if(nextState.email != this.state.email) {  

      return false;  

    }

    else if(nextState.password != this.state.password) {  

      return false;  

    }  
    else return true;  
    }

`

इस तरह से करने से मेरा मुद्दा ठीक हो गया। यह समस्या हर बार राज्य परिवर्तन जो फिर ध्यान केंद्रित रीसेट करता है घटक प्रतिपादन प्रतीत होता है। इसलिए जब आप ऑनकॉन्ग इवेंट को स्टेट वैल्यू सेट करने के लिए उपर्युक्त फंक्शन का उपयोग करते हैं तो कंपोनेंट पुनः लोड नहीं होता है।

@ Aspintyl000 यह काम करता है ... कुछ हद तक। जब मैं 'मान' प्रॉप के माध्यम से टेक्स्टफील्ड का मान सेट कर रहा हूं, और मैं उस प्रोप को 'this.state.value' पर सेट कर रहा हूं, तो कुछ भी नहीं दिखता है। हालांकि, जब मैं इसे हटाता हूं, तो यह काम करने लगता है।

मैं एक तालिका पंक्ति में textfields का उपयोग कर रहा हूं, और यह एक समस्या है :( कोई प्रगति?

Psid.txt

मुझे भी वही त्रुटि हो रही थी। लेकिन ComponentsDidMount () {का उपयोग करने के बाद
this.refs.textField.focus ();
}
यह ध्यान केंद्रित नहीं खोता है। लेकिन यह इनपुट मूल्य नहीं दिखाता है।

मैं जोड़ने की कोशिश की <TextField /> एक में <Table /> । उपरोक्त स्थितियों की तरह, मैं इनपुट पर ध्यान केंद्रित नहीं कर सकता।
मेरा समाधान: एक onClick ईवेंट जोड़ें , जब मैं इसे क्लिक करता हूं, तो तालिका के selectable=false । अपने इनपुट ऑपरेशन के बाद, टेबल के selectable=true को सेट करने के लिए onBlue इवेंट का उपयोग करें।

बहुत अप्रिय व्यवहार।

मैंने दो इनपुट बक्से को स्टाइल-कंपोनेंट के साथ लपेटने के बाद इसका अनुभव किया था। बाहरी div ने व्यवहार को पूरी तरह से तोड़ दिया। यह इस पुस्तकालय के डिजाइन में एक भयानक दोष है।

तो यह एक बहुत भयानक काम है, लेकिन निम्नलिखित काम करता है:

`` ``
onSomeValueChanged = घटना => {
(Event.target.value) this.props.someValueChanged;

const { target } = event;
setTimeout(() => {
  target.focus();
}, 10);

};
`` ``

हाँ, सुंदर नहीं ...

@scotatsatson "बहुत अप्रिय व्यवहार ... इस पुस्तकालय के डिजाइन में भयानक दोष"। यह मुफ्त सॉफ्टवेयर है, जो स्वयंसेवकों द्वारा बनाया गया है ... styled-components के संबंध में अच्छी पकड़ है।

@scotmatson मैं पुष्टि कर सकता हूं कि, कम से कम मेरे मामले में, यदि मैं Container = styled.div मुड़ता हूं तो समस्या का समाधान हो जाता है, जो कि मेरे पास एक सामान्य, गैर-स्टाइल वाले घटक div ।

संपादित करें:
और मैं आपकी कुंठाओं को भी साझा करता हूं। यह वास्तव में अच्छा होगा यदि ये दोनों पुस्तकालय एक साथ त्रुटिपूर्ण रूप से काम करें। यह मुद्दा और विशिष्टता मुद्दा दो चीजें हैं जो मुझे आशा है कि जल्द ही इस्त्री हो जाएंगी, लेकिन मैं उन लोगों के लिए आभारी हूं जो अपने समय की सेवा कर रहे हैं।

EDIT2:
मैंने अभी-अभी पता लगाया कि मेरे मामले में समस्या क्या थी: रेंडर-मेथड में कंपोनेंट-कंपोनेंट घटक घोषित करना! यह हर पुन: रेंडर पर घटकों को फिर से बनाने का कारण बन रहा था और रिएक्ट ट्रैक नहीं कर सकता था कि किस तत्व का री-रेंडर सीमा पर ध्यान केंद्रित था। यह मेरे लिए कुछ अन्य री-रेंडर मुद्दों की ओर भी अग्रसर था।

अपने घटक के बाहर मेरी सभी स्टाइल-घटक घोषणाओं को आगे बढ़ाते हुए मेरे लिए ध्यान केंद्रित करने के मुद्दों को हल किया। शायद एक ग़लती की ग़लती लेकिन किसी ने भी इस बात का ज़िक्र नहीं किया कि यहाँ तो मुझे लगा कि मैं वापस आकर रिपोर्ट करूँगा।

मुझे जो समस्या प्रतीत हो रही है, वह यह है कि जब भी एक TextFields (या इनपुट) किसी वस्तु के अंदर प्रस्तुत किया जा रहा है, तो फोकस बहुत अधिक है। नक्शे के बाहर TextFields पूरी तरह से काम कर रहे हैं। मैं किसी भी सहारा या कुछ और याद आ रही है? मैं पूरी तरह से खो गया हूं

मैंने बिना किसी भाग्य के इस धागे में सुझाए गए लगभग हर समाधान की कोशिश की।

मोटा ढांचा यह है

मुख्य फ़ाइल

...
    function Steps(props) {
      const { steps } = props;
      if(steps) {
        return steps.map((step, index) => (
          <div key={(step.order === '' ? index : step.order)}>
            <NewUxCard step={step} index={index} onChange={props.onChange} 
              onChangeCard={props.onChangeCard} onParamChange={props.onParamChange}/>
          </div>
        ));
      }
    }  

<div>
  <TextField/> //working
  <Steps steps={this.props.ux.steps} onChange={this.onChange} 
              onChangeCard={this.handleChangeCard} onParamChange={this.handleParamChange} /> 
</div>

NewUxCard

...
<div>
  <TextField type="text" fullWidth id={"qq"+this.props.index} label="Name" 
                    value={this.props.step.name} onChange={this.props.onChangeCard('name', this.props.index)} margin="normal" /> //not working - loses focus on each key stroke
</div>

वर्थ नोटिंग कि मैं Redux-React का उपयोग कर रहा हूं, इसलिए राज्य परिवर्तन इनपुट-> एक्शन-> reducer के माध्यम से जाता है

कोई विचार? धन्यवाद

संपादित करें 1:
समस्या की आगे की जांच, मैंने इसे संकुचित कर दिया है और प्रतिक्रिया फ़ंक्शन को हटाकर हल किया है चरण (सहारा) जो एक टैग बनाने के लिए उपयोग किया जाता है(इस मामले में)।

तो पहले, संरचना थी-> फंक्शन स्टेप्स (प्रॉप्स) -> मैपिंग क्लास। इसलिए अब, मैंने फंक्शन (मिडिल मैन) को हटा दिया और सिर्फ कॉन्स स्टेप्स -> मैपिंग क्लास। मैं केवल यह अनुमान लगा सकता हूं कि यह क्यों काम कर रहा है (शायद कुछ प्रॉप्स को नजरअंदाज किया जा रहा था) लेकिन इसने मेरे मामले को हल कर दिया।

@ पिल्टसेन मुझे सिर्फ .map() में TextFields प्रदान करते समय v1.5.0 पर इस समस्या का सामना करना पड़ा - मैंने इसे अपने TextField कुंजी को इनपुट के समान मूल्य होने तक सीमित कर दिया है, इसलिए जब यह परिवर्तित होता है तो इसका कारण TextField को माउंट करना होता है। फिर से और ध्यान खोना। यकीन नहीं होता है कि अगर आप में मदद करता है - हालांकि मुझे यकीन है कि अब तक आप इसे हल कर चुके हैं

यह भी रेंडर प्रॉप्स का उपयोग करने का एक लक्षण है। कुछ ऐसा करना

<HigherOrderComponent
    render={hocProps => <TextField value={...} onChange={...} />
/>

इस व्यवहार का कारण बन सकता है। तय करने के लिए, एक टुकड़ा पारित करने के बजाय अगर डिजाइन द्वारा अनुमति दी गई है:

<HigherOrderComponentThatDoesntPassOwnState
    component={<TextField  {...this.props}/>}
/>

मेरे मामले में ऐसा लगता है कि फ़ोकस नहीं खोया गया था लेकिन TextField से कर्सर गायब हो गया। मैं देख सकता हूँ कि document.activeElement मेरे TextField के बराबर है, मैं मूल्य (प्रकार संख्या) को बदलने के लिए कीबोर्ड कमांड और माउस व्हील का उपयोग कर सकता हूं, लेकिन हर प्रकार का reducer रन रेंडर होता है और कर्सर खो जाता है।

फिर रेंडर के शीर्ष पर मैं अपने TextField आईडी द्वारा खोज करता हूं और बनाता हूं

MyTextField.blur();
MyTextField.focus();

, जो मदद नहीं कर रहा है। लेकिन जब मैं कुछ समय के साथ फोकस () करता हूं , तो यह काम करने लगता है।

संपादित करें:
ठीक है, एचओसी के अंदर यह अभी भी काम नहीं कर रहा है, इसलिए इसे वैसे भी ऊपर धकेलने की जरूरत है।

@ younes0 मैं पुष्टि कर सकता हूँ कि यह मेरे लिए भी ठीक करता है। मेरे मामले में, मेरे पास एक हेल्पर स्टेटलेस कंपोनेंट था जो कुछ सामान्य प्रॉप्स सेट के साथ एक टेक्स्टफिल्ड लौटाएगा और फिर उस पर बाकी प्रॉप्स को फैलाएगा, इसलिए मुझे className या variant जैसी चीजें निर्दिष्ट करने की आवश्यकता नहीं थी। पूरे फॉर्म पर TextField s को और फिर से इसे ठीक कर दिया।

क्या इसे फिर से खोला जा सकता है, या एक नया मुद्दा दायर किया जाना चाहिए?

मुझे अभी भी यह समस्या आ रही है, मैं 3.2.0 का उपयोग कर रहा हूं

@OmarDavilaP क्या आप एक प्रजनन के साथ एक नया मुद्दा बना सकते हैं?

मैंने इसे अपने मामले के लिए हल किया है, आपको उस पाठ क्षेत्र को एक अद्वितीय आईडी प्रदान करने की आवश्यकता है।
...
हालांकि फिर से प्रस्तुत करने के बाद आईडी को बदलना नहीं चाहिए। इस तरह रिएक्ट किस तत्व पर केंद्रित था या नहीं इस पर नज़र रख सकते हैं।
पुनश्च मेरे पास एक सरणी में textfields था जो myArray.map के माध्यम से प्रस्तुत किया गया है, वहां आपको रेंडर करने पर समान कुंजी प्रदान करनी होगी।

संपादित करें: मैंने फिर से परीक्षण किया, मेरे "ऐरे" पर "की" होने से रेयरेंडर्स के बीच एक ही समस्या हल हो गई।
टेक्स्टफ़ील्ड आईडी बदल कर शार्ट.गंजेट () हो गई है।

    params.map(function(p,i){
        return(
           <div key={i}>              <--- this will always be the same for this particular row.
               <div className='param-inner'>
                   <TextField id={shortid.generate()} value = {p.value} onChange={this.updateParam.bind(this,i)}/>               <-- id here can be random, but it is necessary to avoid browser warning "we don't have enough information..."
                   </div>
               <div className='param-inner'>{p.unit}</div>
           </div>
        )
    }.bind(this));

हाँ, यह मेरे मामले में समस्या को हल करता है, मूल रूप से मैं उपयोग कर रहा था:

<NewTextField key={user.id+Math.random()}>
मैंने इसे बदल दिया:

<NewTextField key={user.id}>
तो, हाँ यह एक बुरा अभ्यास लगता है यादृच्छिक कुंजी उत्पन्न हर बार जब यह घटक फिर से प्रस्तुत करना है।

मेरे लिए यह मुद्दा था, मैंने TextField के लिए एक आवरण समारोह बनाया, हालांकि मैंने अपने घटक फ़ंक्शन के भीतर उस फ़ंक्शन को घोषित किया, एक बार मेरे फ़ंक्शन के बाहर चले जाने के बाद सब कुछ अपेक्षित रूप से काम किया!

मैंने एक Sendbox नमूना बनाया https://codesandbox.io/s/material-demo-msbxl?fontsize=14&hidenavigation=1&theme=dark

मुझे सशर्त प्रतिपादन के साथ यह समस्या आ रही है। मेरे पास javascript ऑब्जेक्ट रेंडर में है जो .js फ़ाइल में विभिन्न कंपोनेंट्स को लौटाता है। मैं इसे सही ढंग से वर्णन नहीं कर रहा हूं, क्षमा करें। जब मैं इसे ठीक कर लूंगा तो मैं इस पोस्ट को संपादित करूंगा, अगर मुझे याद है।

संपादित करें: हाँ, मैंने इसे ठीक किया! मेरा मानना ​​है कि जिस तरह से मैं हर घटक का प्रतिपादन कर रहा था, जब वह प्रदर्शित नहीं हुआ था। मैं तर्क के बाहर सौंप दिया और यह अब ठीक काम करने लगता है। यहाँ पुराना कोड है:

संपादित करें: मैं इस चीज़ पर स्टाइल नहीं कर सकता, इसलिए कोई बात नहीं।

मैंने आज इस मुद्दे का सामना किया और कुछ घंटों के लिए अपना सिर पीट लिया। मेरे मामले में, जो मैं गलत कर रहा था, वह मेरे पेज को बेहतर तरीके से व्यवस्थित करने के लिए TextField को अपने पेज को व्यवस्थित करने के लिए लपेट रहा था (यदि डेटा लोड हो रहा है, आदि आदि से कुछ रेंडर न करें), लेकिन मैंने useState छोड़ दिया TextField को नियंत्रित किया।

पोस्टरिटी के लिए, मेरी मूर्खता को पुन: पेश करने के लिए यहां एक छोटा कोडैंडबॉक्स लिंक है: https://codesandbox.io/s/mui-textedit-losefocus-g6xxb

अब सवाल यह है कि मैं TextField रैप करने वाले अपने कस्टम घटक को कैसे बनाऊंगा? इस बग में HOC और createElement दोनों लगते हैं:

  const MyField= ({ name, ...props }) => (
    <TextField
      fullWidth
      variant="outlined"
      size="small"
      name={name}
      {...props}
    />
  );

  const MyField= ({ name, ...rest }) => {
    return React.createElement(TextField, {
      fullWidth: true,
      variant: "outlined",
      size: "small",
      name: name,
      {...rest}
    });
  };

कोई बात नहीं, उपरोक्त दृष्टिकोण ठीक काम करता है - मुझे एहसास हुआ कि मुझे मूल घटक के अंदर कस्टम घटक परिभाषित किया गया था, जो इस मुद्दे का कारण बना। जब पैरेंट स्कोप के बाहर ले जाया जाता है (जैसे यह होना चाहिए) यह ठीक काम करता है - मैंने सही दृष्टिकोण दिखाने के लिए पिछले सैंडबॉक्स को अपडेट किया: https://codesandbox.io/s/mui-textedit-losefocus-g6xxb

मेरे लिए यह मुद्दा था, मैंने TextField के लिए एक आवरण समारोह बनाया, हालांकि मैंने अपने घटक फ़ंक्शन के भीतर उस फ़ंक्शन को घोषित किया, एक बार मेरे फ़ंक्शन के बाहर चले जाने के बाद सब कुछ अपेक्षित रूप से काम किया!

मैंने एक Sendbox नमूना बनाया https://codesandbox.io/s/material-demo-msbxl?fontsize=14&hidenavigation=1&theme=dark

यह मेरी समस्या थी। धन्यवाद!

कोई बात नहीं, उपरोक्त दृष्टिकोण ठीक काम करता है - मुझे एहसास हुआ कि मुझे मूल घटक के अंदर कस्टम घटक परिभाषित किया गया था, जो इस मुद्दे का कारण बना। जब पैरेंट स्कोप के बाहर ले जाया जाता है (जैसे यह होना चाहिए) यह ठीक काम करता है - मैंने सही दृष्टिकोण दिखाने के लिए पिछले सैंडबॉक्स को अपडेट किया: https://codesandbox.io/s/mui-textedit-losefocus-g6xxb

धन्यवाद। यह काम किया!

मेरे लिए यह मुद्दा था, मैंने TextField के लिए एक आवरण समारोह बनाया, हालांकि मैंने अपने घटक फ़ंक्शन के भीतर उस फ़ंक्शन को घोषित किया, एक बार मेरे फ़ंक्शन के बाहर चले जाने के बाद सब कुछ अपेक्षित रूप से काम किया!

मैंने एक Sendbox नमूना बनाया https://codesandbox.io/s/material-demo-msbxl?fontsize=14&hidenavigation=1&theme=dark

@ fleischman718 यह एक बाहर लगाने के लिए धन्यवाद! मूल घटक के अंदर TextField के लिए रैपिंग घटक फ़ंक्शन को हटाने से मेरी समस्या ठीक हो गई!

मुझे यह पता लगाने में एक सेकंड लगा कि सैंडबॉक्स में क्या हो रहा है इसलिए मैंने नीचे एक सारांश दिया:

import { TextField } from '@material-ui/core';

const ParentComponent = () => {

  // DON'T DO THIS!!!
  // fix issue by moving this component definition outside of the ParentComponent
  // or assign the TextField to a variable instead
  const TextFieldWrapper = () => (
    <TextField />
  );

  return (
    <div>
      <TextFieldWrapper />
    </div>
  )
}