Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Como usar ref em inputs que na verdade são componentes?

Referente ao curso React parte 2: Container components e o ciclo de vida do react, no capítulo Lidando com a autenticação do usuário e atividade 1- Criação da Tela de login

por Artur Oliveira
| 144.9k xp | 21 posts

Boa tarde comunidade,

Estou com bastante dificultade em usar a abordagem utilizada no 2º curso do react para recuperar o valor do input, em vez de usar o state como no 1º curso.

incluindo um input do html funciona normal, mas ao usar um component como input não.

import React, { Component } from 'react';
import InputForm from './InputForm';

export default class FormProduto extends Component {

    constructor(props) {
        super(props);

    }

    formSubmit(event) {
        event.preventDefault();

    // Retorna o valor 
        console.log(this.login.value);

    //Retorna undefined
    console.log(this.nome.value);

    //Retorna o obj InputForm 
    console.log(this.nome);

    //Retorna undefined
    console.log(this.nome.props.value);

    }

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

                <form className="col s12" onSubmit={this.formSubmit.bind(this)}>

                    <input type="text" ref={(input) => this.login = input} />


                    <InputForm
                        className="input-field col s12"
                        id="nome"
                        type="text"
                        name="nome"
                        label="Nome"
                        ref={(input) => { this.nome = input }} />

                    <button
                        className="btn waves-effect waves-light input-field col s12 deep-orange lighten-1"
                        type="submit"
                        name="action">
                        Cadastrar
                    </button>
                </form>
            </div>
        );
    }
}

Classe InputForm

import React, { Component } from 'react';

export default class InputForm extends Component {

    render() {
        return (

            <div className={this.props.className}>
                <input id={this.props.id} type={this.props.type} name={this.props.name} value={this.props.value} />
                <label htmlFor={this.props.id}>{this.props.label}</label>
            </div>

        );
    }
}

console.log(this.nome.props.value); Faz sentido não retornar nada, pois eu não estou enviando o value, ex: value, mas se eu passar o value teria que usar o metodo onchange como feito no 1º curso, certo? ou estou enganado? Queria usar o ref no lugar do onchange para recuperar o valor do input.

Creio que é não é algo complicado, mas estou me quebrando.

Desde já agradeço. Bons estudos à todos.

3 respostas
por Artur Oliveira
| 144.9k xp | 21 posts

Consegui recuperar alterando para os codigos abaixo

classe FormProduto:

import React, { Component } from 'react';
import InputForm from './InputForm';

export default class FormProduto extends Component {

    constructor() {
        super();
        this.campoNome = React.createRef();


    }

    formSubmit(event) {
        event.preventDefault();

        console.log(this.campoNome.current.input.current.value);

    }

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

                <form className="col s12" onSubmit={this.formSubmit.bind(this)}>

                    <input type="text" ref={(input) => this.login = input} />


                    <InputForm
                        className="input-field col s12"
                        id="nome"
                        type="text"
                        name="nome"
                        label="Nome"
                        ref={this.campoNome} />

                    <button
                        className="btn waves-effect waves-light input-field col s12 deep-orange lighten-1"
                        type="submit"
                        name="action">
                        Cadastrar
                    </button>
                </form>
            </div>
        );
    }
}

classe input

import React, { Component } from 'react';

export default class InputForm extends Component {


    constructor(){
        super();
        this.input = React.createRef();

    }

    render() {
        return (

            <div className={this.props.className}>
                <input  ref={this.input}  id={this.props.id} type={this.props.type} name={this.props.name} value={this.props.value} />
                <label htmlFor={this.props.id}>{this.props.label}</label>
            </div>

        );
    }
}

Mas isso ficou feio pakas: console.log(this.campoNome.current.input.current.value);

Me baseei por aqui https://reactjs.org/docs/refs-and-the-dom.html

Seria melhor forma de resolver esse tipo de problema?

solução!
por Artur Diniz Adam
| 100.4k xp | 155 posts
Alura Scuba Team

Fala xará!

O que eu faria nesse caso é o seguinte... se vc está interessado em executar essa função quando o InputForm for editado, diga isso pro InputForm:

<InputForm 
     onEdit={(nome) => { this.nome = nome }}
 />

Passando a função como prop, lá no seu componente vc pode executar ela no evento de input do <input> e pegar as informações através do objeto event que é passado como parâmetro:

import React, { Component } from 'react';

export default class InputForm extends Component {


    constructor(){
        super();
    }

    render() {
        return (

            <div className={this.props.className}>
                <input  onInput={(event) => this.props.onEdit(event.target.value)}  id={this.props.id} type={this.props.type} name={this.props.name} value={this.props.value} />
                <label htmlFor={this.props.id}>{this.props.label}</label>
            </div>

        );
    }
}

O que acha?

por Artur Oliveira
| 144.9k xp | 21 posts

Gostei da abordagem, vou testar aqui. valeu cara!

Bons estudos à todos.