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

Pegar valor de um componente customizado

inputs customizado:


import DatePicker from 'react-toolbox/lib/date_picker/DatePicker';

import React, { Component } from 'react';

const datetime = new Date(2015, 10, 16);
const min_datetime = new Date(new Date(datetime).setDate(8));
datetime.setHours(17);
datetime.setMinutes(28);

const localeExample = {
  months: 'janeiro_fevereiro_março_abril_maio_junho_julho_agosto_setembro_outubro_novembro_dezembro'.split('_'),
  monthsShort: 'jan_fev._mar._mai._jun._jul._ago._set._out._nov._dez.'.split('_'),
  weekdays: 'domingo_segunda_terça_quarta_quinta_sexta_sabado'.split('_'),
  weekdaysShort: 'dom._seg._ter._qua._qui._sex._sab.'.split('_'),
  weekdaysLetter: 'dom_seg_ter_qua_qui_sex_sab'.split('_')
}
export default  class InputDateCustomizado extends Component{
   constructor(){
          super();
          this.state = {msgErro:''};
    }
    state = {date2: datetime};

  handleChange = (item, value) => {
    this.setState({...this.state, [item]: value});
  };

  render() {
    return (
        <div className="pure-control-group">
            <label 
                      htmlFor={this.props.id}>{this.props.label}
                  </label>
             <DatePicker
                label    = {this.props.label}
                locale   = {localeExample}
                onChange = {this.handleChange.bind(this, 'date1')}
                value    = {this.state.date1}
                name     = {this.props.name}
                ref      = {this.props.inputRef}
                required = {this.props.required}
              />
         </div>
        );
    }
}

recebe input customizado

import React, { Component } from 'react';
import '../assets/react-toolbox/theme.css';
import theme from '../assets/react-toolbox/theme.js';
import ThemeProvider from 'react-toolbox/lib/ThemeProvider';
import Button from 'react-toolbox/lib/button/Button';
//COMPONENTES
import InputCustomizado from '../componentes/InputCustomizado';
import InputDateCustomizado from '../componentes/InputDateCustomizado';

export default  class CadastrarPromocao extends Component{

    constructor(props) {
        super(props);
        this.state = {msg: ''};
    }
     enviaForm(evento){
        evento.preventDefault(); 
          const token= localStorage.getItem('token-representante'); 
          console.log(token);

        const requestInfo = {
            method:'PUT',
            body:JSON.stringify({ nome:            this.nome.value
                                , qtd_pontos:      parseInt(this.pontos.value)
                                , inicio_vigencia: this.inicio_vigencia.value
                                , final_vigencia: this.fim_vigencia.value
                                , representante_id:{id:this.representante.value}
                            }),
            headers:{'content-type'  : 'application/json'
                   , 'Authorization': token
                     }
        };
/*FETCH*/
    }

    render() {
        return (
        <ThemeProvider  theme={theme}>
          <div>
           <h3>Cadastrar Promocao</h3>
           <span>{this.state.msg}</span>
            <div className="">

              <form className="pure-form pure-form-aligned" onSubmit={this.enviaForm.bind(this)}>


                <InputDateCustomizado
                id="fim_vigencia" 
                label="Fim"
                name="fim_vigencia" 
                inputRef={el => this.fim_vigencia = el}

                />

                <div className="pure-control-group">                                  
                  <label></label> 
                  <button type="submit" className="pure-button pure-button-primary">Cadastrar</button>                                    
                </div>
              </form>             
             </div>  
             </div>
              </ThemeProvider>
        );
    }
}

simplesmente o valor não vem... nao tenho ideia de como resolver. alguem tem alguma ideia de como posso pegar o valor do inputDateCustomizado.

2 respostas
solução!

Opa, minha ficha demorou para cair, mas acho que é isso.. o seu inputDateCustomizado não tem a propriedade value mesmo, pq ele não é um input tradicional :). Acho que o que você precisa é passar um callback para o inputDate que deve ser chamado sempre que o valor é alterado lá dentro.. aí sim, ele vai chamar a função do componente que está usando ele.