Material-ui: [TextField] يفقد التركيز على إعادة العرض

+1

لا بد لي من استخدام حدث onBlur مع defaultValue لجعل Textfields تعمل بسلاسة.

أي شخص لديه حل لجعل هذا العمل؟

لا أعتقد أن هذه مشكلة بعد الآن. انظر الكود أدناه:

//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). يمكنك أن ترى أن TextField يحتفظ بالتركيز:

ما زلت أفهم هذا. @ shaurya947 المثال لم يعيد إنتاج الخطأ لأن TextField لا يحتوي على خاصية القيمة الأولية.
لإعادة إنتاج الاستخدام
<TextField ref="textField" value={this.state.valueToBeEdited} onChange = {this._incrementStateCounter}/>

أو

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

كما أنني أرى ما يبدو أنه تراجع عن هذه المشكلة. تفقد حقولي النصية التركيز على إعادة التصيير. أنا أقوم بإعداد الخاصية value لـ TextField ، لذا فهي مكون خاضع للرقابة.

ألاحظ تحذيرًا جديدًا في وحدة التحكم: "يقوم TextField بتغيير إدخال غير متحكم فيه لنوع النص ليتم التحكم فيه". لا أتذكر رؤية ذلك من قبل ، ولست متأكدًا مما إذا كان مناسبًا هنا أم لا. يظهر التحذير بمجرد إدخال الحرف الأول في TextField .

من خلال القليل من التصحيح ، يبدو أن شيئًا ما يتسبب في فقدان التركيز في TextField . في داخلي onBlur تم استدعاء معالج، الذي تبديل isFocused الحالة الداخلية من TextField إلى false. إذا قمت بتسجيل document.activeElement أثناء معالج onBlur (لتحديد المكون الذي سرق التركيز) ، فسيتم تسجيل جذر المستند (النص الأساسي).

لقد تمكنت من تضييق هذا الأمر أكثر من خلال تحديد أن مصدر حدث التمويه كان أول MenuItem ضمن Menu في مكان آخر في التطبيق. أدى تعيين الخاصية disableAutoFocus إلى true حل مشكلتي. آمل أن يساعد هذا شخص آخر.

لقد فتحت مشكلة منفصلة لالتقاط هذا: # 4387.

أستطيع أن أؤكد أن هذا لا يزال يمثل مشكلة ...

رؤيته في نموذج تسجيل دخول بسيط للغاية - أستخدمه بالاقتران مع نماذج إعادة الإرسال وعندما أتفاعل مع النموذج ، يتسبب ذلك في إعادة تصيير (لمس حقلاً بلغة إعادة صياغة النموذج) مما يفقد التركيز.

كحل بديل ، أقوم فقط بإعادة عرض النموذج الفعلي إذا كان هناك تغيير في حالة الخطأ.

يمكنك إعادة إظهار هذه المشكلة بسهولة عن طريق وضع TextField ضمن مجموعة Table أنها selectable=true . عندما تنقر على حقل نصي لبدء تحريره ، سيحصل السطر على التركيز ، وبالتالي تغيير لون الخلفية (أعتقد أنه قد يتم تعيين بعض props من السطر على أنه selected=true ) تشغيل إعادة التصيير ، وبالتالي ستفقد التركيز ...

لذلك لا يمكنك استخدام TextField في selectable Table ، لست متأكدًا من أنها ممارسة جيدة لتجربة المستخدم على أي حال ، ولكن لا يزال :)

لاحظنا أنه في مشروعنا ، يمكنني محاولة دفع الناسخ.

أي عمل حول هذا؟ لاحظ أيضًا ذلك عند استخدام منطقة إدخال نصية عادية داخل الجدول.

@ dalexander01 تم العثور على "حل" ، ولكن يبدو أنه خاص جدًا

deyceg يرجى القيام بذلك ، لا يمكن أن تؤذي 😄. ما عليك سوى مواجهة هذه المشكلة مع هذه المجموعة من <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>

لقد قمت بحلها لحالتي ، فأنت بحاجة إلى توفير معرف فريد لحقل النص هذا.
...
يجب ألا يتغير المعرف بعد إعادة العرض بالرغم من ذلك. بهذه الطريقة يمكن لـ React تتبع العنصر الذي تم التركيز عليه أم لا.
ملاحظة: كان لدي حقول نصية في مصفوفة يتم تقديمها عبر myArray.map ، حيث يتعين عليك تقديم نفس المفاتيح عند العرض.

تحرير: لقد اختبرت مرة أخرى ، فقط وجود "المفتاح" في myArray ليكون هو نفسه عبر أجهزة العرض أدى إلى حل المشكلة.
تم تغيير معرف textfield إلى shortid.generate ().

    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/ccf712c5733508784cd709c18c29059542d6aad1/src/SelectField/SelectField. شبيبة # L192

لذلك أحتاج أيضًا إلى إضافة قائمة DropDownMenu هذه داخليًا تغلف المكونات في قائمة ، أضفت تعطيل التركيز التلقائي لجعل TextField يحافظ على التركيز عليه كعرض أدناه.

ربما يمكننا كشف مكون DropDownMenu من SelectField والسماح بتعطيل التركيز التلقائي مع الدعائم.

أحد الحلول البديلة لهذا الأمر بالنسبة لأولئك الذين يكافحون معه ويريدون فقط أن يعمل شيء ما ، على الرغم من أنه من المحتمل ألا يكون قابلاً للتطبيق في بعض المواقف ويمكن أن يطرح مشكلات (لست متأكدًا تمامًا من نفسي) هو استخدام متغير في المثيل بدلاً من ذلك من الدولة. لذا بدلاً من this.state.value ، سيكون this.value الذي سيتم تحديثه onChange . لن يحتوي المكون على خاصية value . ثم في المعالج onChange ستستخدم e.target.value .

الفرق الوحيد الذي أعرفه بين متغير في المثيل مقابل الحالة هو أن النسخة var لن تؤدي إلى إعادة تصيير. على الرغم من أنه قد تكون هناك أسباب أخرى ، لذلك آمل أن يلتقط الآخرون فترة الركود في هذا الأمر.

لا يزال هذا الخطأ يحصل. أي عمل حولها؟

كان الحل الذي وجدته هو تجاوز وظيفة shouldComponentUpdate إلى المكون الخاص بي ثم إرجاع القيمة false عندما أغير قيم الحالة التي تستخدمها حقول النص الخاصة بي.

`shouldComponentUpdate(nextProps, nextState) {    

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

      return false;  

    }

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

      return false;  

    }  
    else return true;  
    }

"

القيام بذلك بهذه الطريقة أصلح مشكلتي. يبدو أن المشكلة هي عرض المكون في كل مرة تتغير فيها الحالة والتي تعيد بعد ذلك التركيز. لذلك باستخدام الوظيفة المذكورة أعلاه لتعطيل العرض عند إجراء حدث onChange لتعيين قيم الحالة ، لا يتم إعادة تحميل المكون.

@ Aspintyl000 هذا يعمل ... إلى حد ما. عندما أقوم بتعيين قيمة حقل النص من خلال خاصية "القيمة" ، وأقوم بتعيين هذه الخاصية على "this.state.value" ، لا يظهر أي شيء. على الرغم من أنه عندما أزيل ذلك ، يبدو أنه يعمل.

أنا أستخدم Textfields في صف جدول ، وهذه مشكلة: :( أي تقدم؟

Psid.txt

كنت أتلقى نفس الخطأ أيضًا. ولكن بعد استخدام componentDidMount () {
this.refs.textField.focus () ،
}
لا تفقد التركيز. لكنها لا تظهر قيمة الإدخال.

حاولت إضافة <TextField /> في <Table /> . مثل الحالات المذكورة أعلاه ، لا يمكنني تركيز المدخلات.
الحل الخاص بي: إضافة حدث onClick إلى ملف ، عند النقر فوقه ، اضبط الجدول selectable=false . بعد عملية الإدخال ، استخدم حدث onBlue لتعيين الجدول selectable=true .

سلوك بغيض جدا.

لقد جربت هذا بعد تغليف صندوقي إدخال بمكون مصمم. كسر div الخارجي السلوك تمامًا. هذا عيب رهيب في تصميم هذه المكتبة.

إذن هذا حل رهيب جدًا ولكن الأعمال التالية في الغالب:

""
onSomeValueChanged = الحدث => {
this.props.someValueChanged (event.target.value) ،

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

} ؛
""

نعم ، ليست جميلة ...

scotmatson "سلوك بغيض جدا ... عيب رهيب في تصميم هذه المكتبة". هذا برنامج مجاني ، صنعه متطوعون ... ومع ذلك ، فإن الأمر يتعلق بالعلاقة مع styled-components .

scotmatson يمكنني أن أؤكد أنه ، على الأقل في حالتي ، يتم حل المشكلة إذا قمت بتحويل Container = styled.div الذي أملكه كغلاف إلى عنصر عادي غير مصمم على غرار div .

تعديل:
وأنا أيضًا أشاركك إحباطاتك. سيكون من الرائع حقًا أن تعمل هاتان المكتبتان معًا بشكل لا تشوبه شائبة. هذه القضية ومسألة الخصوصية هما شيئان آمل أن يتم تسويتهما قريبًا ، لكنني ممتن للأشخاص الذين تطوعوا بوقتهم.

تحرير 2:
لقد اكتشفت للتو سبب المشكلة في حالتي: التصريح عن مكونات ذات نمط في طريقة العرض! كان هذا يتسبب في إعادة إنشاء المكونات في كل عملية إعادة تصيير ولم تتمكن React من تتبع العنصر الذي تم التركيز عليه عبر حدود إعادة التصيير. كان هذا يؤدي أيضًا إلى بعض مشكلات إعادة التصيير الأخرى بالنسبة لي.

أدى نقل جميع إقرارات المكونات المصممة إلى خارج المكون الخاص بي إلى حل مشكلات التركيز المفقودة بالنسبة لي. ربما كان خطأ مستجد ولكن لم يذكر أحد ذلك هنا لذلك اعتقدت أنني سأعود وأبلغ.

يبدو أن المشكلة التي أواجهها هي أن التركيز يكون كثيرًا عندما يتم تقديم TextFields (أو Input) داخل خريطة object.map (). تعمل حقول النص خارج الخرائط بشكل مثالي. هل فاتني أي دعائم أو أي شيء آخر؟ أنا ضائع تمامًا

لقد جربت كل الحلول المقترحة في هذا الموضوع تقريبًا دون أي حظ.

هذا الهيكل الخام

الملف الرئيسي

...
    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 ، لذا فإن تغييرات الحالة تمر عبر المدخلات-> الإجراء-> المخفض

أيه أفكار؟ شكر

تحرير 1:
مزيد من التحقيق في المشكلة ، لقد قمت بتضييقها وحلها عن طريق إزالة خطوات وظيفة التفاعل (الدعائم) المستخدمة لإنشاء علامة(في هذه الحالة).

قبل ذلك ، كان الهيكل-> خطوات الوظيفة (الدعائم) -> فئة الخرائط. حتى الآن ، قمت بإزالة الوظيفة (الرجل الأوسط) وفقط خطوات Const -> Mapping Class. لا يسعني إلا أن أتوقع سبب نجاح ذلك (ربما تم تجاهل بعض الدعائم) ولكنه حل حالتي.

piltsen لقد واجهت للتو هذه المشكلة في .map() - قمت بتضييقها إلى أن مفتاح TextField الخاص بي هو نفس قيمة الإدخال ، لذلك عندما تم تغييره ، من المحتمل أن يتسبب TextField في التحميل مرة أخرى ويفقد التركيز. لست متأكدًا مما إذا كان ذلك يساعدك - على الرغم من أنني متأكد من أنك قمت بفرزها الآن

هذا أيضًا أحد أعراض استخدام دعائم التصيير. فعل شيء مثل

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

يمكن أن يسبب هذا السلوك. لإصلاح ذلك ، قم بتمرير جزء بدلاً من ذلك إذا سمح التصميم بذلك:

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

في حالتي يبدو أنه لم يتم فقد التركيز ولكن المؤشر يختفي من TextField. يمكنني التحقق من هذا المستند. activeElement يساوي TextField الخاص بي ، ويمكنني استخدام أمر لوحة المفاتيح وعجلة الماوس لتغيير القيمة (نوع الرقم) ، ولكن كل عرض تشغيل من نوع المخفض يحدث وفقد المؤشر.

ثم في الجزء العلوي من العرض ، أبحث عن طريق معرف TextField الخاص بي وأقوم به

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

، وهو ما لا يساعد. ولكن عندما أركز () مع بعض المهلة ، يبدو أنها تعمل.

تعديل:
حسنًا ، داخل HOC لا يزال لا يعمل ، لذلك يبدو أنه بحاجة إلى دفعه للأعلى على أي حال.

@ younes0 يمكنني أن أؤكد أن هذا يصلح لي أيضًا. في حالتي ، كان لدي مكون مساعد عديم الحالة والذي سيعيد TextField مع مجموعة من الدعائم الشائعة ثم نشر بقية الدعائم عليه ، لذلك لم يكن علي تحديد أشياء مثل className أو variant عدة مرات في النموذج بأكمله. كانت حقول النص الخاصة بي تفقد التركيز بمجرد إجراء أي تغيير على النموذج ، وأزلت وظيفة المساعد وجعلت TextField s الخام مرارًا وتكرارًا.

هل يمكن إعادة فتح هذا ، أم ينبغي رفع قضية جديدة؟

ما زلت أتلقى هذه المشكلة ، فأنا أستخدم 3.2.0

OmarDavilaP هل يمكنك إنشاء إصدار جديد باستخدام النسخ؟

لقد قمت بحلها لحالتي ، فأنت بحاجة إلى توفير معرف فريد لحقل النص هذا.
...
يجب ألا يتغير المعرف بعد إعادة العرض بالرغم من ذلك. بهذه الطريقة يمكن لـ React تتبع العنصر الذي تم التركيز عليه أم لا.
ملاحظة: كان لدي حقول نصية في مصفوفة يتم تقديمها عبر myArray.map ، حيث يتعين عليك تقديم نفس المفاتيح عند العرض.

تحرير: لقد اختبرت مرة أخرى ، فقط وجود "المفتاح" في myArray ليكون هو نفسه عبر أجهزة العرض أدى إلى حل المشكلة.
تم تغيير معرف textfield إلى shortid.generate ().

    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 ، لكنني أعلنت أن هذه الوظيفة ضمن وظيفة المكون الخاصة بي ، بمجرد أن انتقلت خارج وظيفتي ، كل شيء يعمل كما هو متوقع!

لقد أنشأت نموذجًا لبرنامج الإرسال https://codesandbox.io/s/material-demo-msbxl؟fontsize=14&hidenavigation=1&theme=dark

أواجه هذه المشكلة مع العرض الشرطي. لدي كائن جافا سكريبت aa في العرض الذي يعيد مكونات مختلفة في ملف .js. أنا لا أصفها بشكل صحيح ، آسف. عندما أقوم بإصلاحه ، سأقوم بتحرير هذا المنشور ، إذا كنت أتذكر ذلك.

تحرير: رائع ، لقد أصلحته! أعتقد أن الطريقة التي كنت أعرض بها بشكل مشروط هي عرض كل مكون حتى عندما لا يتم عرضه. لقد نقلت المنطق خارج التصيير ويبدو أنه يعمل بشكل جيد الآن. هذا هو الكود القديم:

تحرير: لا يمكنني التصميم على هذا الشيء ، فما باللك.

لقد واجهت هذه المشكلة اليوم وخبطت رأسي بها لبضع ساعات جيدة. في حالتي ، ما كنت أفعله بشكل خاطئ هو تغليف TextField في مكون عديم الحالة لتنظيم صفحتي بشكل أفضل (لا تعرض بعضها إذا كانت البيانات قيد التحميل ، وما إلى ذلك) ، لكنني تركت useState callback الذي يتحكم في 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 ، لكنني أعلنت أن هذه الوظيفة ضمن وظيفة المكون الخاصة بي ، بمجرد أن انتقلت خارج وظيفتي ، كل شيء يعمل كما هو متوقع!

لقد أنشأت نموذجًا لبرنامج الإرسال https://codesandbox.io/s/material-demo-msbxl؟fontsize=14&hidenavigation=1&theme=dark

كانت هذه مشكلتي. شكرا لك!

لا داعي للقلق ، النهج أعلاه يعمل بشكل جيد - أدركت أنني قد حددت المكون المخصص داخل المكون الرئيسي ، مما تسبب في حدوث المشكلة. عندما يتم نقله خارج النطاق الأصلي (كما ينبغي) فإنه يعمل بشكل جيد - لقد قمت بتحديث وضع الحماية السابق لإظهار النهج الصحيح: https://codesandbox.io/s/mui-textedit-losefocus-g6xxb

شكرا لك. نجح هذا!

بالنسبة لي ، كانت المشكلة ، لقد أنشأت وظيفة مجمعة لـ TextField ، لكنني أعلنت أن هذه الوظيفة ضمن وظيفة المكون الخاصة بي ، بمجرد أن انتقلت خارج وظيفتي ، كل شيء يعمل كما هو متوقع!

لقد أنشأت نموذجًا لبرنامج الإرسال https://codesandbox.io/s/material-demo-msbxl؟fontsize=14&hidenavigation=1&theme=dark

@ fleischman718 شكرا

استغرق الأمر مني ثانية لمعرفة ما كان يجري في الصندوق الرمل لذلك أضع ملخصًا أدناه:

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