reactjs - 如何在 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使用您自己的组件，现在您想要获得 DatePicker通过Cadastro.js值组件。

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

看来你已经快到了。您需要添加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);
    };