Ant-design: FormItem ne détecte pas l'entrée de contrôle à l'intérieur

Créé le 28 mars 2017  ·  8Commentaires  ·  Source: ant-design/ant-design

Environnement

  • version antd: 2.7.4
  • OS et sa version: OS X 10.12.3
  • Navigateur et sa version: Chrome 56

Qu'est-ce que tu as fait? Veuillez fournir des étapes pour reproduire votre problème.

Nous enveloppons nos champs de formulaire dans leur propre composant qui contient leur logique de validation. Exemple

Nom d'utilisateurInput.js

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

Et nous voulons les utiliser sous nos formes comme celle-ci

// imports here

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

export default Form.create()(CustomForm);

Cela ne fonctionne pas car FormItem.getControls ne détecte pas le composant en tant que contrôle. Voit simplement le wrapper comme UsernameInput.

A quoi vous attendez-vous?

FormItem pour détecter UsernameInput et fonctionner comme n'importe quel contrôle d'entrée. Afficher les messages d'erreur, les commentaires, les aides, etc.

Qu'est-ce qui se passe?

FormItem ne trouve pas le contrôle à l'intérieur.

Inactive IssueHuntFest help wanted 🗣 Discussion
Source
picture gaastonsr

Commentaire le plus utile

Nous avons résolu ce problème en appelant le composant en tant que fonction

CustomForm.js

// imports here

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

export default Form.create()(CustomForm);

Mais si vous êtes ouvert aux idées, je pense qu'une solution possible serait de définir un contexte dans le FormItem et le Input peut s'enregistrer lorsqu'il est présent. Exemple

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);
    }
  }
}
picture gaastonsr le 30 mars 2017
👍4

Tous les 8 commentaires

Il est difficile de résoudre ce problème. Pourriez-vous poster vos conseils (comment mettre en œuvre) ici le cas échéant?

benjycui picture benjycui le 29 mars 2017

Nous avons résolu ce problème en appelant le composant en tant que fonction

CustomForm.js

// imports here

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

export default Form.create()(CustomForm);

Mais si vous êtes ouvert aux idées, je pense qu'une solution possible serait de définir un contexte dans le FormItem et le Input peut s'enregistrer lorsqu'il est présent. Exemple

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 picture gaastonsr le 30 mars 2017
👍4

J'essaierai de trouver une solution.

benjycui picture benjycui le 30 mars 2017

@gaastonsr pourrais-tu afficher tout ton code concernant UsernameInput avec cette solution de contournement?

sbyps picture sbyps le 24 nov. 2017

@gaastonsr Votre solution m'aide beaucoup!

Est-ce un problème toujours valable? La suggestion de contexte me semble bonne.

tomasfrancisco picture tomasfrancisco le 2 août 2018
👍1

Je viens de rencontrer cela aujourd'hui sur [email protected]. Encore un problème. La solution de contournement des fonctions de @gaastonsr est plus élégante que de demander à tous les composants de formulaire de vérifier le contexte.

JonDum picture JonDum le 14 oct. 2018

Bonjour @gaastonsr. Nous apprécions totalement votre proposition / commentaire, bienvenue pour nous envoyer une Pull Request . Veuillez envoyer votre Pull Request à la branche appropriée (branche de fonctionnalité pour la nouvelle fonctionnalité, master pour la correction de bogues et autres changements), remplissez le [Pull Request Template ] ici, fournissez le journal des modifications / TypeScript / documentation / cas de test si nécessaire et assurez-vous que CI a réussi, nous le réviserons bientôt.

Bonjour @gaastonsr, nous sommes entièrement d'accord avec votre suggestion / commentaire, n'hésitez pas dans cet entrepôt pour créer une Pull Request pour résoudre ce problème. Veuillez envoyer la demande de tirage à la branche appropriée (nouvelles fonctionnalités dans la branche de fonctionnalité, autres dans la branche principale), assurez-vous de remplir le modèle prédéfini dans la demande de tirage et fournissez le journal des modifications correspondant, les définitions TypeScript, les cas de test, les documents, etc. requis pour les modifications. , Et pour nous assurer que CI est passé, nous examinerons dès que possible, merci d'avance et nous nous réjouissons de votre contribution!

giphy

ant-design-bot picture ant-design-bot le 28 août 2019

Veuillez vérifier le nouveau composant de formulaire dans antd v4, le formulaire v3 ne sera pas maintenu dans peu de temps.

afc163 picture afc163 le 13 mars 2020
Cette page vous a été utile?
0 / 5 - 0 notes

Questions connexes

xtznhzxdev picture xtznhzxdev  ·  3Commentaires
yangbin1994 picture yangbin1994  ·  3Commentaires
mineralres picture mineralres  ·  3Commentaires
ryannealmes picture ryannealmes  ·  3Commentaires
AhmedSayed77 picture AhmedSayed77  ·  3Commentaires