Ant-design: FormItem अंदर नियंत्रण इनपुट का पता नहीं लगाता है

को निर्मित 28 मार्च 2017 · 8टिप्पणियाँ · स्रोत: ant-design/ant-design

वातावरण

atd संस्करण: 2.7.4
OS और इसका संस्करण: 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);
  }
}

Input.js

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

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

gaastonsr 30 मार्च 2017

👍4

सभी 8 टिप्पणियाँ

इस मुद्दे को हल करना मुश्किल है। क्या आप अपनी सलाह (कैसे लागू करें) यहाँ पोस्ट कर सकते हैं यदि कोई हो?

benjycui 29 मार्च 2017

हमने घटक को फ़ंक्शन के रूप में कॉल करके इसे हल किया

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

Input.js

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

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

gaastonsr 30 मार्च 2017

👍4

मैं एक समाधान खोजने की कोशिश करूंगा।

benjycui 30 मार्च 2017

इस वर्कअराउंड के साथ @gaastonsr यूजरनेम के बारे में अपना पूरा कोड दिखा सकता है?

sbyps 24 नव॰ 2017

@gaastonsr आपका समाधान मुझे बहुत मदद करता है!

क्या यह अभी भी वैध मुद्दा है? संदर्भ सुझाव मुझे अच्छा लगता है।

tomasfrancisco 2 अग॰ 2018

👍1

बस [email protected] पर आज इस में भाग गया @gaastonsr का फ़ंक्शन वैकल्पिक है।

JonDum 14 अक्तू॰ 2018

नमस्कार @gaastonsr। हम पूरी तरह से आपके प्रस्ताव / प्रतिक्रिया को पसंद करते हैं, हमें इसके लिए

नमस्कार @gaastonsr, हम आपके सुझाव / प्रतिक्रिया से पूरी तरह सहमत हैं, कृपया इस समस्या को हल करने के लिए एक निवेदन में इस गोदाम में स्वतंत्र महसूस करें। कृपया सही शाखा में पुल अनुरोध भेजें (फीचर शाखा में नई सुविधाएँ, मास्टर शाखा में अन्य), पुल अनुरोध में पूर्व निर्धारित टेम्पलेट को भरना सुनिश्चित करें, और परिवर्तनों के लिए आवश्यक संबंधित चैंज, टाइपस्क्रिप्ट परिभाषाएँ, परीक्षण मामलों, दस्तावेजों, आदि प्रदान करें। , और यह सुनिश्चित करने के लिए कि सीआई को पारित कर दिया गया है, हम जितनी जल्दी हो सके समीक्षा करेंगे, अग्रिम धन्यवाद और आपके योगदान के लिए तत्पर हैं!

giphy

ant-design-bot 28 अग॰ 2019

Atd v4 में नए फॉर्म कंपोनेंट की जांच करें, v3 फॉर्म को कम समय में बनाए नहीं रखा जाएगा।

afc163 13 मार्च 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स