Ant-design: لا يكتشف FormItem إدخال التحكم بالداخل

تم إنشاؤها على ٢٨ مارس ٢٠١٧ · 8تعليقات · مصدر: ant-design/ant-design

بيئة

إصدار antd: 2.7.4
نظام التشغيل وإصداره: OS X 10.12.3
المتصفح ونسخته: كروم 56

ما الذي فعلته؟ يرجى تقديم خطوات لإعادة إظهار مشكلتك.

نحن نلف حقول النموذج الخاصة بنا في مكون خاص بها يحتوي على منطق التحقق الخاص بهم. مثال

UsernameInput.js

class UsernameInput extends Component {
  render() {
    return this.props.form.getFieldDecorator(this.props.id, {
      rules: [...]
    })(InputComponent);
  }
}

ونريد أن نستخدمها في أشكالنا مثل هذه

// imports here

class CustomForm {
  render() {
    return (<Form>
      <Form.Item>
        <UsernameInput form={this.props.form} />
      </Form.Item>
    </Form>);
  }
}

export default Form.create()(CustomForm);

هذا لا يعمل لأن FormItem.getControls لا يكتشف المكون كعنصر تحكم. فقط يرى الغلاف على أنه UsernameInput.

ماذا توقعت؟

FormItem لاكتشاف UsernameInput والعمل كأي عنصر تحكم في الإدخال. إظهار رسائل الخطأ والتعليقات والمساعدات وما إلى ذلك.

ماذا يحدث؟

FormItem لا يجد عنصر التحكم بالداخل.

Inactive IssueHuntFest help wanted 🗣 Discussion

مصدر

gaastonsr

التعليق الأكثر فائدة

لقد حللنا هذا عن طريق استدعاء المكون كدالة

CustomForm.js

// imports here

class CustomForm {
  render() {
    return (<Form>
      <Form.Item>
        {UsernameInput({ form: this.props.form })}
      </Form.Item>
    </Form>);
  }
}

export default Form.create()(CustomForm);

ولكن إذا كنت منفتحًا على الأفكار ، أعتقد أن الحل المحتمل هو تحديد سياق في FormItem ويمكن لـ Input تسجيل أنفسهم عندما يكون موجودًا. مثال

FormItem.js

class FormItem extends Component {
  static childContextTypes = {
    registerControl: PropTypes.func
  };

  getChildContext() {
    return { registerControl: this.registerControl }; 
  }

  registerControl(control) {
    this.controls.push(control);
  }
}

إدخال. js

class Input extends Component {
  static contextTypes = {
    registerControl: PropTypes.func
  };

  componentDidMount() {
    if (this.context.registerControl) {
      this.registerControl(this);
    }
  }
}

gaastonsr في ٣٠ مارس ٢٠١٧

👍4

ال 8 كومينتر

من الصعب حل هذه المشكلة. هل يمكنك نشر نصيحتك (كيفية التنفيذ) هنا إن وجدت؟

benjycui في ٢٩ مارس ٢٠١٧

لقد حللنا هذا عن طريق استدعاء المكون كدالة

CustomForm.js

// imports here

class CustomForm {
  render() {
    return (<Form>
      <Form.Item>
        {UsernameInput({ form: this.props.form })}
      </Form.Item>
    </Form>);
  }
}

export default Form.create()(CustomForm);

FormItem.js

class FormItem extends Component {
  static childContextTypes = {
    registerControl: PropTypes.func
  };

  getChildContext() {
    return { registerControl: this.registerControl }; 
  }

  registerControl(control) {
    this.controls.push(control);
  }
}

إدخال. js

class Input extends Component {
  static contextTypes = {
    registerControl: PropTypes.func
  };

  componentDidMount() {
    if (this.context.registerControl) {
      this.registerControl(this);
    }
  }
}

gaastonsr في ٣٠ مارس ٢٠١٧

👍4

سأحاول إيجاد حل.

benjycui في ٣٠ مارس ٢٠١٧

gaastonsr هل يمكن أن تظهر الكود الخاص بك بالكامل حول UsernameInput مع هذا الحل البديل؟

sbyps في ٢٤ نوفمبر ٢٠١٧

gaastonsr حلك ساعدني كثيرًا!

هل هذه مشكلة لا تزال صالحة؟ يبدو اقتراح السياق جيدًا بالنسبة لي.

tomasfrancisco في ٢ أغسطس ٢٠١٨

👍1

واجهت هذا اليوم على [email protected]. لا تزال مشكلة. الحل البديل لوظيفة gaastonsr هو imo أكثر أناقة من طلب جميع مكونات النموذج للتحقق من السياق.

JonDum في ١٤ أكتوبر ٢٠١٨

مرحبًاgaastonsr. نحن نحب اقتراحك / ملاحظاتك تمامًا ، ومرحبًا بك لإرسال طلب السحب إلينا . يرجى إرسال طلب السحب إلى الفرع المناسب (فرع الميزات للميزة الجديدة ، والماجستير لإصلاح الأخطاء والتغييرات الأخرى) ، املأ [نموذج طلب السحب ] هنا ، قم بتوفير حالات سجل التغيير / TypeScript / التوثيق / الاختبار إذا لزم الأمر وتأكد من اجتياز CI ، سنراجعها قريبًا. نقدرها مقدمًا ونحن نبحث عن كلمات لمساهمتك!

مرحبًا gaastonsr ، نحن نتفق تمامًا مع اقتراحك / ملاحظاتك ، لا تتردد في هذا المستودع لإنشاء طلب سحب لحل هذه المشكلة. يرجى إرسال طلب السحب إلى الفرع الصحيح (ميزات جديدة لفرع الميزة ، وميزات أخرى إلى الفرع الرئيسي) ، وتأكد من ملء القالب المُعد

giphy