Ant-design: FormItem no detecta la entrada de control dentro

Creado en 28 mar. 2017 · 8Comentarios · Fuente: ant-design/ant-design

Medio ambiente

versión antd: 2.7.4
SO y su versión: OS X 10.12.3
Navegador y su versión: Chrome 56

¿Qué hiciste? Proporcione los pasos necesarios para reproducir su problema.

Envolvemos nuestros campos de formulario en su propio componente que contiene su lógica de validación. Ejemplo

UsernameInput.js

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

Y queremos usarlos en nuestros formularios como este

// imports here

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

export default Form.create()(CustomForm);

Esto no funciona porque FormItem.getControls no detecta el componente como control. Solo ve el contenedor como UsernameInput.

Que esperabas

FormItem para detectar UsernameInput y trabajar como cualquier control de entrada. Muestra mensajes de error, comentarios, ayudas, etc.

¿Qué ocurre?

FormItem no encuentra el control dentro.

Inactive IssueHuntFest help wanted 🗣 Discussion

Fuente

gaastonsr

Comentario más útil

Resolvimos esto llamando al componente como una función

CustomForm.js

// imports here

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

export default Form.create()(CustomForm);

Pero si está abierto a ideas, creo que una posible solución sería definir un contexto en el FormItem y el Input pueden registrarse ellos mismos cuando esté presente. Ejemplo

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

👍4

Todos 8 comentarios

Es difícil resolver este problema. ¿Podría publicar su consejo (cómo implementarlo) aquí, si lo hubiera?

benjycui en 29 mar. 2017

Resolvimos esto llamando al componente como una función

CustomForm.js

// imports here

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

export default Form.create()(CustomForm);

Pero si está abierto a ideas, creo que una posible solución sería definir un contexto en el FormItem y el Input pueden registrarse ellos mismos cuando esté presente. Ejemplo

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

👍4

Intentaré encontrar una solución.

benjycui en 30 mar. 2017

@gaastonsr, ¿ podría mostrar su código completo sobre UsernameInput con esta solución?

sbyps en 24 nov. 2017

@gaastonsr ¡ Tu solución me ayuda mucho!

¿Sigue siendo un problema válido? La sugerencia de contexto me suena bien.

tomasfrancisco en 2 ago. 2018

👍1

Me encontré con esto hoy en @gaastonsr es, en mi opinión, más elegante que requerir que todos los componentes del formulario verifiquen el contexto.

JonDum en 14 oct. 2018

Hola @gaastonsr. Nos gusta mucho su propuesta / comentarios, bienvenido a enviarnos una solicitud de extracción. Envíe su solicitud de extracción a la rama adecuada (rama de función para nueva función, maestra para corrección de errores y otros cambios), complete la [Plantilla de solicitud de extracción ] aquí, proporcione el registro de cambios / TypeScript / documentación / casos de prueba si es necesario y asegúrese de que CI haya pasado, lo revisaremos pronto. ¡Apreciamos su avance y esperamos su contribución!

Hola @gaastonsr, estamos totalmente de acuerdo con tu sugerencia / comentario. Siéntete libre en este almacén para crear una solicitud de plantilla preestablecida en la solicitud de extracción y proporcione el registro de cambios correspondiente, las definiciones de TypeScript, los casos de prueba, los documentos, etc. necesarios para los cambios. Y para asegurarnos de que se apruebe el IC, lo revisaremos lo antes posible, ¡gracias de antemano y esperamos su contribución!

giphy