2

Quisiera saber por qué no puedo puedo enviar una propiedad desde un "container"(funcional) a un "component"(Presentacional). Miren el código.

import React, { PureComponent } from "react";

/*Importing Register Form*/
import NotLoggedRegisterForm from "./NotLoggedRegisterForm";

export default class HandleForm {
  handleSubmit = e => {
    e.preventDefault();
    alert(2);
  };

  render() {
    return <NotLoggedRegisterForm propiedad="algo" />;
  }
}

Ese es el "container" es quien debería enviarme propiedad a NotLoggedRegisterForm en vez de eso, recibo undefined. Aquí el código de mi componente funcional

import React from "react";

/*Importing Antd*/
import { Form, Input, Icon, Button } from "antd";

export default Form.create()(function NotLoggedRegisterForm(props) {
  const { getFieldDecorator } = props.form;

  const FormItem = Form.Item;

  return (
    <Form id="hero-register-form">
      <h1>Proeidad: {props.propiedad}</h1>
      <FormItem>
        {getFieldDecorator("email", {
          rules: [{ required: true, message: "Please input your email!" }]
        })(
          <Input
            prefix={<Icon type="mail" style={{ color: "rgba(0,0,0,.25)" }} />}
            type="email"
            placeholder="Email"
          />
        )}
      </FormItem>
      <FormItem>
        {getFieldDecorator("password", {
          rules: [{ required: true, message: "Please input your Password!" }]
        })(
          <Input
            prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
            type="password"
            placeholder="Password"
          />
        )}
      </FormItem>
      <FormItem>
        {getFieldDecorator("password", {
          rules: [
            {
              required: true,
              message: "Please input your Confirm password!"
            }
          ]
        })(
          <Input
            prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
            type="password"
            placeholder="Confirm password"
          />
        )}
      </FormItem>
      <FormItem>
        <Button
          type="primary"
          style={{ backgroundColor: "var(--primary)" }}
          htmlType="submit"
          className="register-form-button"
        >
          Register now
        </Button>
      </FormItem>
    </Form>
  );
});
1
  • No sé muy bien como funciona antd, pero tu clase HandleForm debería extender React.Component o React.PureComponent, ¿no?
    – Glantucan
    Commented el 22 dic. 2018 a las 19:29

1 respuesta 1

1

al parecer ya lo he logrado solucionar, para cualquiera que este leyendo esto debo mencionar que, no se debemos imprimir como tal el componente presentacional (la UI) sino más bien el container (la lógica). A continuación dejaré mi código.

Componente que enviará las propiedades.

import React, { PureComponent } from "react";

import NotLoggedRegisterForm from "./NotLoggedRegisterForm";

export default class HandleForm extends PureComponent {
  render() {
    return (
      <div>
        <NotLoggedRegisterForm greeting="Welcome to React" />
      </div>
    );
  }
}

Componente que las recibe y las imprime (la UI)

import React from "react";

/*Importing Antd*/
import { Form, Input, Icon, Button } from "antd";

export default Form.create()(function NotLoggedRegisterForm(props) {
  const { getFieldDecorator } = props.form;

  const FormItem = Form.Item;

  return (
    <Form id="hero-register-form" onSubmit={props.handleSubmit}>
      **<p>{props.greeting}</p>**
      <FormItem>
        {getFieldDecorator("email", {
          rules: [{ required: true, message: "Please input your email!" }]
        })(
          <Input
            prefix={<Icon type="mail" style={{ color: "rgba(0,0,0,.25)" }} />}
            type="email"
            placeholder="Email"
          />
        )}
      </FormItem>
      <FormItem>
        {getFieldDecorator("password", {
          rules: [{ required: true, message: "Please input your Password!" }]
        })(
          <Input
            prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
            type="password"
            placeholder="Password"
          />
        )}
      </FormItem>
      <FormItem>
        {getFieldDecorator("password", {
          rules: [
            {
              required: true,
              message: "Please input your Confirm password!"
            }
          ]
        })(
          <Input
            prefix={<Icon type="lock" style={{ color: "rgba(0,0,0,.25)" }} />}
            type="password"
            placeholder="Confirm password"
          />
        )}
      </FormItem>
      <FormItem>
        <Button
          type="primary"
          style={{ backgroundColor: "var(--primary)" }}
          htmlType="submit"
          className="register-form-button"
        >
          Register now
        </Button>
      </FormItem>
    </Form>
  );
});

A contiunación, dentro de mi componente que imprime el formulario.

import React from "react";

import "./NotLoggedPage.css";

/*Importing components*/
import HandleForm from "./registerForm/HandleForm";

/*Importing router*/
import { Link } from "react-router-dom";

/*Importing Ant Design*/
import { Layout } from "antd";

const { Header, Footer } = Layout;

export default function NotLoggedPage(props) {
  return (
    <Layout>
      <Header className="header">
        <div id="logo">
          <h1>BookWorm</h1>
        </div>
        <div id="header-menu">
          <div id="login-inline">
            <Link to="/auth">Iniciar sesión</Link>
          </div>
        </div>
      </Header>
      <section id="content">
        <div id="hero">
          <div id="hero-register">
            <h2 style={{ color: "#262626" }}>Register for free</h2>
            <HandleForm />
          </div>
        </div>

        <div id="why-use">
          <div id="why-use-content">
            <h2>Why use BookWorm?</h2>
          </div>
        </div>

        <div id="recent-books">
          <h2>Recent Books</h2>
        </div>

        <div id="the-team">
          <h2>The Team</h2>
          <div id="diego-cardona">
            <div id="profile">
              <img
                src="https://avatars1.githubusercontent.com/u/31087700?s=460&v=4"
                alt="Diego Cardona"
                id="avatar"
              />
              <div id="name">
                <h3>Diego Cardona</h3>
                <small>Founder</small>
              </div>
            </div>
          </div>
        </div>
      </section>
      <Footer className="footer">BookWorm ©2018</Footer>
    </Layout>
  );
}

Espero sea de gran ayuda, me costo mucho resolverlo jaja

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.