如何讓value datapicker對toobox自定義做出反應？

Question

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

}

其它及部件：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}); 
    } 

<pre> 

InputDateCustomizado 
    id="fim_vigencia" 
    label="Fim" 
    name="fim_vigencia" 
    value = {this.state.fim_vigencia} 
    onSubmit = {this.setFimVigencia} 
/> 

</pre> 

Answer 1

獲取一個onChange事件的值或使用value道具。文件的例子：http://react-toolbox.com/#/components/date_picker

<DatePicker label='Birthdate' onChange={this.handleChange.bind(this, 'date1')} value={this.state.date1} />

你可以在handleChange事件獲得的價值，讓您與當前選定的日期更新您的狀態。

編輯：啊好吧我想我明白你現在問什麼。您用自己的組件包裝了DatePicker，現在您希望通過Cadastro.js組件獲得DatePicker值。

您需要在Cadastro.js中創建一個方法，該方法接受InputDateCustomizado組件的狀態更改，然後將該函數作爲prop傳遞給InputDateCustomizado組件。在InputDateCustomizado狀態改變時，調用傳入函數，它應該更新父組件中的狀態。然後，您將始終在父組件中具有datepicker值。

它看起來像你幾乎在那裏。您需要將updateState函數添加到Cadastro.js組件。在InputDateCustomizado組件handleChange事件中，您需要調用this.props.updateState並傳入新值。

在Cadastro.js

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

在InputDateCustomizado

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