嘗試使用Redux的形式

更新場我有以下領域嘗試使用Redux的形式

import React, { Component } from 'react' 
import { Field } from 'redux-form' 

import RDateRangePicker from '../../../../components/RDateRangePicker/RDateRangePicker' 

export default class DateRange extends Component { 
    constructor (props) { 
    super(props) 
    this.state = { dateRangeEmpty: true } 

    this.handleChange = this.handleChange.bind(this) 
    } 

    handleChange (event) { 
    this.setState({ dateRangeEmpty: true }) 
    } 

    render() { 
    let cssClassName = this.state.dateRangeEmpty 
     ? 'form-group has-feedback has-error' : 'form-group has-feedback has-error' 
    return (
     <div className={cssClassName}> 
     <div className="col-sm-12">Date range:</div> 
     <div className="col-sm-12"> 
      <Field name="dateRange" 
      component={RDateRangePicker} 
      className="form-control" 
      onChange={this.handleChange} 
      /> 
     </div> 
     </div> 
    ) 
    } 
}

但onChange永遠不會觸發。任何想法？

import React, { Component } from 'react' 
import DateRangePicker from 'react-bootstrap-daterangepicker' 
import moment from 'moment' 
import './RDateRangePicker.scss' 

export default class RDateRangePicker extends Component { 

    _formatValue (value) { 
    return value.startDate.isSame(value.endDate, 'day') 
     ? value.startDate.format('DD/MM/YYYY') 
     : value.startDate.format('DD/MM/YYYY') + ' - ' + value.endDate.format('DD/MM/YYYY') 
    } 

    _handleEvent (event, picker) { 
    const { input: { onChange } } = this.props 
    this._input.value = this._formatValue(picker) 
    onChange({ startDate: picker.startDate, endDate: picker.endDate }) 
    } 

    render() { 
    const ranges = { 
     'Today': [moment(), moment()], 
     'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 
     'Last 7 Days': [moment().subtract(6, 'days'), moment()], 
     'Last 30 Days': [moment().subtract(29, 'days'), moment()], 
     'This Month': [moment().startOf('month'), moment()], 
     'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] 
    } 

    return (
     <DateRangePicker ranges={ranges} onApply={::this._handleEvent}> 
     <input 
      type="text" 
      className="form-control" 
      readOnly 
      style={{ backgroundColor: '#fff' }} 
      ref={(c) => { this._input = c }} 
      required 
      placeholder="Ex. 09/01/2017 - 13/01/2017" 
     /> 
     <span className="glyphicon glyphicon-calendar form-control-feedback" aria-hidden="true" /> 
     </DateRangePicker> 
    ) 
    } 
}

來源

2017-01-10 Jean

基於shixukai的回答，onInputChange不是字段的有效道具。你可能需要在RDateRangePicker上有一個包裝類。並在該包裝類中將onInputChange設置爲RDateRangePicker。 – Mox

請嘗試將onInputChange更改爲onChange。 – Mox

完成，但我沒有工作。 – Jean

-1

您使用的字段incorrent方式

，看到http://redux-form.com/6.4.3/docs/api/Field.md/

來源

2017-01-10 08:24:27 shixukai

你不能使用你的自定義組件領域Redux的形式作爲的。您需要創建small wrapper component。在你的情況下，它會是這個樣子：

const ReduxFormDateRangePicker = (props) => (
     <RDateRangePicker 
      ranges={props.input.value} 
      onApply={value => props.input.onChange(value)} 
     /> 
    );

而且你不需要在現場的onChange參數定義：

 <Field name="dateRange" 
     component={RDateRangePicker} 
     className="form-control" 
     />

來源

2017-01-10 09:05:14 luboskrnac

嘗試使用Redux的形式

回答

相關問題