Material-ui ：在 KeyboardDatePicker onchange 上传递对象详细信息

Question

我想使用 KeyboardDatePicker 为数组中的每个行对象选择日期。

const meetings = [
  {id: 1, title: 'a', date: '14/5/2020'},
  {id: 2, title: 'b', date: '15/5/2020'}
];
  
const renderMeeting = () => 
  meetings.map(row => (
    <>
      <h2>{row.title}</h2>
      <KeyboardDatePicker 
        margin="normal" 
        label="Meeting Date" 
        value={row.date} 
        format="dd/MM/yyyy" 
        onChange={this.handleMeetingDateChange}
      />
    </>
  ))

如何将 row 对象与选定的 date 一起传递给 handleMeetingDateChange()？

P.S。我试过 react-datepicker 但设计与页面上的其他组件不一致，这就是我尝试使 KeyboardDatePicker 起作用的原因。

Answer 1

您可以像这样将行数据与事件一起传递：

 onChange={(event) => this.handleMeetingDateChange(event, row)}

然后，您可以在 handleMeetingDateChange

中像这样访问这些变量

handleMeetingDateChange = (event, row) => {
   console.log(event, row);
   ...
}

Answer 2

使用箭头函数。

像这样

...
let meetings = [{id: 1, title: 'a', date: '14/5/2020'}, {id: 2, title: 'b', date: '15/5/2020}];
const handleMeetingDateChange = (e, row) => {
  console.log(row);
  // rest code goes here
}
...
renderMeeting = () => {
  {meetings.map(row => (
    <h2>{row.title}</h2>
    <KeyboardDatePicker margin="normal" label="Meeting Date" value={r.meetingDate} format="dd/MM/yyyy" 
      onChange={(e) => this.handleMeetingDateChange(e, row)} 
  ))}
}
...

Material-ui ：在 KeyboardDatePicker onchange 上传递对象详细信息

Material-ui : Pass object detail on KeyboardDatePicker onchange

javascript

datepicker

reactjs

material-ui