id undefined in onChange event

Question

Using react datepicker, I am trying to get the id of the clicked component

<DatePicker
id={cellData.column}
selected={DatePickerDate}
onChange={this.onDateRangePickerChange}
className='form-control'
                    />

In my click handler the event being passed is a moment date object, so event.currentTarget is undefined.

onDateRangePickerChange: function(event, picker){

        var localRowDataStack = _.cloneDeep(this.state.rowDataStack);
        localRowDataStack[event.currentTarget.id] = picker.startDate.format(appConfig.getKey('dateFormat'));
        this.setState({
            rowDataStack: localRowDataStack,
            isOmitReRender: false
        });

},

How can I get the id of the clicked datepicker?

score 1 · Answer 1 · answered Apr 02 '16 at 11:05

1

You can as well extend onDateRangePickerChange to accept id and just pas it there like this:

<DatePicker
    id={cellData.column}
    selected={DatePickerDate}
    onChange={(e, p) => this.onDateRangePickerChange(e, p, cellData.column)}
    className='form-control'/>

answered Apr 02 '16 at 11:05

Amid

21,508
5
57
54

Thanks for the reply, how do i do that with es5? – Bomber Apr 02 '16 at 11:15
@Alexander provided you this sample in es5 – Amid Apr 02 '16 at 12:56

Oleksandr T. · Accepted Answer · 2016-04-02T11:59:27.560

1

You can set id as first argument to onDateRangePickerChange with .bind, and thus avoid add id as DatePicker attribute

onDateRangePickerChange: function (column, date) {
  console.log(column, date);
},

<DatePicker
  selected={ DatePickerDate }
  onChange={ this.onDateRangePickerChange.bind(this, cellData.column) }
  className="form-control"
/>;

edited Apr 02 '16 at 11:59

answered Apr 02 '16 at 11:49

Oleksandr T.

76,493
17
173
144

score 0 · Answer 3 · edited May 23 '17 at 12:15

0

You could try doing this way:

onDateRangePickerChange: function(event){

        var id = event.target.id;  // ID from the element
        var localRowDataStack = _.cloneDeep(this.state.rowDataStack);
        localRowDataStack[id] = picker.startDate.format(appConfig.getKey('dateFormat'));
        this.setState({
            rowDataStack: localRowDataStack,
            isOmitReRender: false
        });
},

You could see more examples/responses here: React.js: Identifying different inputs with one onChange handler

edited May 23 '17 at 12:15

Community

1
1

answered Apr 02 '16 at 10:58

JP. Aulet

4,375
4
26
39

Thanks very much for the reply, I still get the undefined id, as event is a moment date. – Bomber Apr 02 '16 at 11:03

id undefined in onChange event

3 Answers3