6

如何在反应工具箱中获取 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}
/>
4

1 回答 1

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组件状态更改的方法，然后将该函数作为道具传递给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);
    };
于 2017-06-05T18:21:17.960 回答