如何在 React 工具箱自定义中获取值日期选择器？

Question

如何获取react toobox中datapicker的值？我正在使用自定义组件。

我正在使用 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 事件中或使用 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 状态发生变化时，调用传入的函数，它应该更新父组件中的状态。那么你将始终在父组件中拥有日期选择器值。

看起来你快到了。您需要向 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);
    };

如何在 React 工具箱自定义中获取值日期选择器？

How to get value datapicker in react toobox custom?

reactjs

react-toolbox