Ant-design: FormItem erkennt keine Steuereingaben im Inneren

Erstellt am 28. März 2017 · 8Kommentare · Quelle: ant-design/ant-design

Umgebung

antd version: 2.7.4
Betriebssystem und seine Version: OS X 10.12.3
Browser und seine Version: Chrome 56

Was haben Sie gemacht? Bitte geben Sie Schritte an, um Ihr Problem wiederherzustellen.

Wir verpacken unsere Formularfelder in eine eigene Komponente, die ihre Validierungslogik enthält. Beispiel

UsernameInput.js

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

Und wir wollen sie in unseren Formen so verwenden

// imports here

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

export default Form.create()(CustomForm);

Dies funktioniert nicht, da FormItem.getControls die Komponente nicht als

Was hast du erwartet?

FormItem , um UsernameInput und als Eingabesteuerung zu arbeiten. Zeigen Sie Fehlermeldungen, Feedback, Hilfen usw. an.

Was ist los?

FormItem findet das Steuerelement nicht im Inneren.

Inactive IssueHuntFest help wanted 🗣 Discussion

Quelle

gaastonsr

Hilfreichster Kommentar

Wir haben dies gelöst, indem wir die Komponente als Funktion aufgerufen haben

CustomForm.js

// imports here

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

export default Form.create()(CustomForm);

Wenn Sie jedoch offen für Ideen sind, besteht eine mögliche Lösung darin, einen Kontext im FormItem und der Input kann sich registrieren, wenn er vorhanden ist. Beispiel

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 am 30. März 2017

👍4

Alle 8 Kommentare

Es ist schwierig, dieses Problem zu lösen. Könnten Sie hier gegebenenfalls Ihren Rat (wie man ihn umsetzt) veröffentlichen?

benjycui am 29. März 2017

Wir haben dies gelöst, indem wir die Komponente als Funktion aufgerufen haben

CustomForm.js

// imports here

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

export default Form.create()(CustomForm);

Wenn Sie jedoch offen für Ideen sind, besteht eine mögliche Lösung darin, einen Kontext im FormItem und der Input kann sich registrieren, wenn er vorhanden ist. Beispiel

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 am 30. März 2017

👍4

Ich werde versuchen, eine Lösung zu finden.

benjycui am 30. März 2017

@gaastonsr Könnten Sie mit dieser anzeigen ?

sbyps am 24. Nov. 2017

@gaastonsr Deine Lösung hilft mir sehr!

Ist dies ein noch gültiges Problem? Der Kontextvorschlag klingt gut für mich.

tomasfrancisco am 2. Aug. 2018

👍1

Bin gerade heute auf gestoßen. Immer noch ein Problem. Die Funktionsumgehung von @gaastonsr ist imo eleganter, als suchen müssen .

JonDum am 14. Okt. 2018

Hallo @gaastonsr. Wir freuen uns sehr über Ihren Vorschlag / Ihr Feedback. Bitte senden Sie uns eine Pull-Anfrage . Bitte senden Sie Ihre Pull-Anfrage an den richtigen Zweig (Feature-Zweig für neues Feature, Master für Bugfix und andere Änderungen). Füllen Sie die [Pull-Request-Vorlage ] Geben Sie hier bei Bedarf Änderungsprotokoll / TypeScript / Dokumentation / Testfälle an und stellen Sie sicher, dass CI bestanden wurde. Wir werden es bald überprüfen. Schätzen Sie es im Voraus und suchen Sie nach einem Wort für Ihren Beitrag!

Hallo @gaastonsr, wir stimmen Ihrem Vorschlag / Feedback voll zögern Sie nicht, in diesem Lager eine Pull-Anfrage zu voreingestellte Vorlage in der Pull-Anforderung aus und geben Sie das entsprechende Änderungsprotokoll, TypeScript-Definitionen, Testfälle, Dokumente usw. an, die für die Änderungen erforderlich sind Und um sicherzustellen, dass CI bestanden wird, werden wir dies so schnell wie möglich überprüfen. Vielen Dank im Voraus und freuen uns auf Ihren Beitrag!

giphy

ant-design-bot am 28. Aug. 2019

Bitte überprüfen Sie die neue Formularkomponente in antd v4. Das Formular v3 wird nicht in kurzer Zeit gepflegt.

afc163 am 13. März 2020

War diese Seite hilfreich?

0 / 5 - 0 Bewertungen