CODEWITHSUNDEEP
datepickerantd
TechGnome
TechGnome

Reputation: 315

DatePicker - which one changed?

I have a form with multiple DatePicker components on it from ant-design. For the most part it works.
The problem is that they are all tied to the same onChange event handler (for simplicity, and because they are all rendered in a loop). I'm getting the date coming through just fine (param 2 of the event handler) but what I can't seem to determine is WHICH of the 5 date pickers is the one that triggered the change.
This is a problem because I have other data on the row I need to associate the date with. I've added a name attribute, but it's not passed through to the handler, grrrr, so it isn't doing me any good.

So, does anyone know how to get the name of the (antd) datepicker that triggered the onChange event, OR know of a date picker that DOES pass it's name, or even itself to the onChange event so that I can tell which one changed?

Upvotes: 1

Views: 1524

Answers (1)

TechGnome
TechGnome

Reputation: 315

Problem solved. Closures to the rescue. Duh.

onDateChangeHandler = (id) =>{
    var self = this;
    return function(mmmt, ds){
        self.setState({ [id]: ds })
    }
}

and then in my loop that sets up the date picker:

<DatePicker size='default' name={"date_" + i} onChange={this.onDateChangeHandler("date_" + i)} />

That gave me the result I needed.

Upvotes: 1

Related Questions