Sunday, February 11, 2018

reactjs - How get value datapicker in react toobox custom?



InputDateCustom.js





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);


export default class InputDateCustomizado extends Component{



state = {date2: datetime};
handleChange = (item, value) => {
console.log(item+" - "+value)
this.setState({...this.state, [item]: value});
};


render() {
return (



DatePicker
label = {this.props.label}
locale = {localeExample}
name = {this.props.name}
required = {this.props.required}
onChange = {this.handleChange.bind(this, 'date1')}
value = {this.state.date1}
/>


);
}

}


other componet: Cadastro.js






constructor(props) {
super(props);
this.state = {msg: '', fim_vigencia:'', nome:''}
this.setNome = this.setNome.bind(this)
this.setFimVigencia = this.setFimVigencia.bind(this)
}

setFimVigencia(evento){
console.log("date")
this.setState({fim_vigencia:evento.target.value});

}





InputDateCustomizado
id="fim_vigencia"
label="Fim"
name="fim_vigencia"

value = {this.state.fim_vigencia}
onSubmit = {this.setFimVigencia}
/>



Answer



Get the value in an onChange event or using the value prop. Doc examples: http://react-toolbox.com/#/components/date_picker






You can get access to the value in the handleChange event allowing you to update your state with the currently selected date.



EDIT: Ah okay I think I understand what you are asking now. You have wrapped DatePicker with your own component and now you want to get the DatePicker value through the Cadastro.js component.



You need to create a method in the Cadastro.js that accepts state changes from the InputDateCustomizado component and then pass that function as a prop to the InputDateCustomizado component. In the InputDateCustomizado when the state changes, call the passed in function and it should update the state in the parent component. Then you will always have the datepicker value in the parent component.



It looks like you are almost there. You need to add an updateState function to the Cadastro.js component. In the InputDateCustomizado component handleChange event, you need to call this.props.updateState and pass in the new value.



In Cadastro.js




updateState = (data) => {
this.setState({
date: data.data //set your state here to the date
})
}


In InputDateCustomizado




    handleChange = (item, value) => {
console.log(item+" - "+value)
this.setState({...this.state, [item]: value});
this.props.updateState(this.state);
};

No comments:

Post a Comment

plot explanation - Why did Peaches' mom hang on the tree? - Movies & TV

In the middle of the movie Ice Age: Continental Drift Peaches' mom asked Peaches to go to sleep. Then, she hung on the tree. This parti...