React Starter. Take data typed in Input

Asked

Viewed 1,128 times

1

Hello

I’m studying the Reactjs... and made the following structure:

[code]

 class MyNascimento extends Component {

   constructor(props) {
     super(props);

     this.state = {      
       nascimentoValue: null,      
     };
   }

   render() {
     return (
       <div className="telaNascimento">

                 <span className="p-float-label">
                   <InputMask
                     id="nascimento"
                     size={20}
                     className={css.txtcampos}
                     mask="99/99/9999"
                     slotChar="__/__/____"
                     value={this.state.nascimentoValue}
                     onChange={event => {
                       this.setState({
                         nascimentoValue: event.target.value
                       });
                     }}
                   />
                   <label htmlFor="nascimento">Nascimento</label>
                 </span>

         {/* Fim telaNascimento */}
       </div>
     );
   }
 }

 class RegistroClientes extends Component {
   constructor(props) {
     super(props);

     this.state = {
       nascimentoValue: null
     };
   }

 render() {
     return (
       <div className={css.fundo}>

  <MyNascimento
             valueNascimento={this.state.nascimentoValue}
             handleClick={this.clickProximo}

           />

         {/* FIM DA DIV FUNDO PRINCIPAL */}
       </div>
     );
   }
 }

 export default RegistroClientes;

[/code]

How do I pick up what was typed in the Mynascimento component and play in the birth variable that is in Registroclientes?

typescript react front-end

  • Solution was based on this topic: https://answall.com/questions/339852/pega-state-componente-filho-no-react

  • Welcome to [en.so]! Don’t add "Solved" to the title. I know it’s common practice in many forums, but here it works different. If you have found the solution, just use the answer field below and you yourself puts the solution found. Don’t forget to put in the detailed steps you did (see [Answer]), because the idea is that the answer is useful for anyone who has the same problem and visit the site in the future. Then it’s up to you accept the answer, and she’ll be "settled" :-)

1 answer

1


all right?

I believe you’ve already found your answer, but you’re going to solve it anyway. In this case to perform the tests I had the input label fill in the value passed by the father.

I tested everything right here.

PARENT COMPONENT:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import MyNascimento from "./Components/MyNascimento";

class RegistroClientes extends Component {
  constructor(props) {
    super(props);

    this.state = {
      nascimentoValue: null
    };
  }

  // Função a ser chamada pelo seu componente filho
  handleChildChange(valorDoFilho) {
    this.setState({ nascimentoValue: valorDoFilho });
  }

  render() {
    return (
      <div>
        <MyNascimento
          nascimentoValue={this.state.nascimentoValue}
          funcaoDoPai={valorDoFilho => this.handleChildChange(valorDoFilho)}
        />

        {/* FIM DA DIV FUNDO PRINCIPAL */}
      </div>
    );
  }
}

export default RegistroClientes;

ReactDOM.render(<RegistroClientes />, document.getElementById("root"));

CHILD COMPONENT: 

import React from "react";

const MyNascimento = props => (
  <div>
    <span>
      <input
        id="nascimento"
        size={20}
        mask="99/99/9999"
        slotChar="__/__/____"
        value={props.nascimentoValue}
        onChange={event => {
          props.funcaoDoPai(event.target.value);
        }}
      />
      <label htmlFor="nascimento">{props.nascimentoValue}</label>
    </span>

    {/* Fim telaNascimento */}
  </div>
);

export default MyNascimento;

I hope I helped. Hugs!

Browser other questions tagged typescript react front-end

You are not signed in. Login or sign up in order to post.