如何在react toobox custom中获取值数据采集器？

Question

我怎么能得到的数据采集器的值在反应图框？我使用自定义组件。

我使用2个组件第一个是所谓的InputDateCustom.js与下面的代码：

import DatePicker from 'react-toolbox/lib/date_picker/DatePicker';
import React, { Component } from 'react';

const datetime = new Date(2015, 10, 16);
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 (
        <div>
             <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}
             />
         </div>
        );
    }
}

另一个组件叫做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 1

在onChange事件中或使用值属性获取值。文档示例：http://react-toolbox.com/#/components/date_picker

<代码>

您可以访问handleChange事件中的值，允许您使用当前选择的日期更新状态。

编辑：啊，好吧，我想我明白你现在的问题了。您已经用自己的组件包装了DatePicker，现在您希望通过Cadastro.js组件获取DatePicker值。

您需要在Cadastro.js中创建一个方法，该方法接受来自InputDateCustomizado组件的状态更改，然后将该函数作为道具传递给InputDateCustomizado组件。在InputDateCustomizado中，当状态更改时，调用传递的函数，它应该更新父组件中的状态。然后，您将始终在父组件中拥有日期选择器值。

看起来你差不多到了。您需要向Cadastro.js组件添加一个updateState函数。在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);
    };