在 React Hooks 的对象数组中使用 onChange 更新 useState 中的日期（日期选择器）答案

【问题标题】：update date (datepicker) in useState using onChange in an array of objects in React Hooks在 React Hooks 的对象数组中使用 onChange 更新 useState 中的日期（日期选择器）
【发布时间】：2019-12-04 16:08:27
【问题描述】：

我用过这样的钩子：

const [tableRows, settableRows] = useState([
    {
        vehicleNumber: '3080',
        bookedOn: '11-23-2019',
        checkIn: new Date()
    },{
        vehicleNumber: '3080',
        bookedOn: '11-23-2019',
        checkIn: new Date()
    }
  ])

我已经使用map 方法渲染了每个对象，并在checkin 中有Datepicker。我想用onChange改变checkIn的值

【问题讨论】：

标签： reactjs datepicker react-hooks

【解决方案1】：

您想从哪个onChange 更改checkIn 参数？您可以将数据结构更改为对象的对象，并为每个对象设置与 vehicleNumber（或任何唯一 ID）相关的键，以便您可以轻松访问要修改的对象，比如说：

const [tableRows, settableRows] = useState({
    `3080`: {
        vehicleNumber: '3080',
        bookedOn: '11-23-2019',
        checkIn: new Date()
    },
    `3081`{
        vehicleNumber: '3081',
        bookedOn: '11-23-2019',
        checkIn: new Date()
    }
  ])

要访问，您可以编写如下方法：

const changeCheckIn = ( vehicleNumber ) => {
   const tableRows_ = tableRows;
   tableRows_[vehicleNumber].checkIn = new Date();
   settableRows(tableRows_)
}

如果您无法修改数据结构，则必须通过遍历您的列表将 id 发送到 changeCheckIn method, so you will be able to identify what row you want to change。

【讨论】：

【解决方案2】：

我正在寻找这个功能

const dateChange = index => e => {

    let newArr = [...tableRows]; 
    newArr[index].checkIn = e

    settableRows(newArr);
}

【讨论】：