Ant-design: FormItem não detecta entrada de controle dentro

Criado em 28 mar. 2017 · 8Comentários · Fonte: ant-design/ant-design

Meio Ambiente

versão antd: 2.7.4
SO e sua versão: OS X 10.12.3
Navegador e sua versão: Chrome 56

O que você fez? Forneça etapas para reproduzir seu problema.

Envolvemos nossos campos de formulário em seus próprios componentes que contêm sua lógica de validação. Exemplo

UsernameInput.js

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

E queremos usá-los em nossos formulários como este

// imports here

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

export default Form.create()(CustomForm);

Isso não funciona porque FormItem.getControls não detecta o componente como um controle. Apenas vê o wrapper como UsernameInput.

O que você esperava?

FormItem para detectar UsernameInput e funcionar como qualquer controle de entrada. Mostrar mensagens de erro, feedback, ajuda, etc.

O que acontece?

FormItem não encontra o controle dentro.

Inactive IssueHuntFest help wanted 🗣 Discussion

Fonte

gaastonsr

Comentários muito úteis

Resolvemos isso chamando o componente como uma função

CustomForm.js

// imports here

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

export default Form.create()(CustomForm);

Mas se você estiver aberto a ideias, acho que uma possível solução seria definir um contexto em FormItem e os Input podem se registrar quando estiverem presentes. Exemplo

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 em 30 mar. 2017

👍4

Todos 8 comentários

É difícil resolver esse problema. Você poderia postar seu conselho (como implementar) aqui se houver?

benjycui em 29 mar. 2017

Resolvemos isso chamando o componente como uma função

CustomForm.js

// imports here

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

export default Form.create()(CustomForm);

Mas se você estiver aberto a ideias, acho que uma possível solução seria definir um contexto em FormItem e os Input podem se registrar quando estiverem presentes. Exemplo

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 em 30 mar. 2017

👍4

Vou tentar encontrar uma solução.

benjycui em 30 mar. 2017

@gaastonsr você poderia mostrar todo o seu código sobre o UsernameInput com esta solução alternativa?

sbyps em 24 nov. 2017

@gaastonsr Sua solução me ajuda muito!

Este é um problema válido? A sugestão de contexto parece boa para mim.

tomasfrancisco em 2 ago. 2018

👍1

Corri para isso hoje em @gaastonsr é imo mais elegante do que exigir que todos os componentes do formulário verifiquem o contexto.

JonDum em 14 out. 2018

Olá @gaastonsr. Gostamos totalmente da sua proposta / feedback, bem-vindo para nos enviar Pull Request para isso. Por favor, envie sua Pull Request para o branch apropriado (feature branch for new feature, master for bugfix e outras mudanças), preencha o [Pull Request Template ] aqui, forneça o changelog / TypeScript / documentation / casos de teste se necessário e certifique-se de que o CI foi aprovado, iremos revisá-lo em breve. Agradeço antecipadamente e estamos aguardando sua contribuição!

Olá @gaastonsr, concordamos totalmente com sua sugestão / feedback, sinta-se à vontade neste warehouse para criar uma solicitação pull para resolver este problema. Envie o Pull Request para o branch correto (novos recursos para o branch de recursos, outros para o branch master), certifique-se de preencher o modelo predefinido no Pull Request e fornecer o changelog correspondente, definições de TypeScript, casos de teste, documentos, etc. necessários para as alterações , E para garantir que o CI seja aprovado, revisaremos o mais rápido possível, obrigado antecipadamente e aguardamos sua contribuição!

giphy