简体   繁体   中英

trying to update a field using redux-form

I have the following field

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

but the onChange is never triggered. Any idea?


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

You can't use your custom component as field on redux-form as is. You need to create small wrapper component . In your case it would look something like this:

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

Also you wouldn't need onChange parameter on Field defined:

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

您正在以错误的方式使用字段,请参阅http://redux-form.com/6.4.3/docs/api/Field.md/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM