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

  float: right;
  clear: both;

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中，调用传入的函数，它应该更新父组件中的状态。然后，您将始终在父组件中具有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);
    };

如何获得价值数据贴纸反应toobox定制？

1 个答案: