如何在 ReactJS 中存储日期表单字段中的多个日期

在 ReactJS 中，为了存储表单字段中的多个日期，我们可以使用一个数组来存储这些日期。在这个数组中，每一个元素都代表着一个日期。

示例代码

import React, { useState } from 'react';

function DateForm() {
  const [dates, setDates] = useState([]);

  const handleDateChange = (event) => {
    const value = event.target.value;
    const index = event.target.getAttribute('data-index');
    let newDates = [...dates];

    if (index === null) {
      newDates.push(value);
    } else {
      newDates[index] = value;
    }

    setDates(newDates);
  };

  const handleAddDate = () => {
    setDates([...dates, '']);
  };

  const handleRemoveDate = (index) => {
    let newDates = [...dates];
    newDates.splice(index, 1);
    setDates(newDates);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log(dates);
    // Do something with the dates
  };

  return (
    <form onSubmit={handleSubmit}>
      {dates.map((date, index) => (
        <div key={index}>
          <input type="date" value={date} onChange={handleDateChange} data-index={index} />
          <button type="button" onClick={() => handleRemoveDate(index)}>
            Remove
          </button>
        </div>
      ))}

      <button type="button" onClick={handleAddDate}>
        Add Date
      </button>

      <button type="submit">Submit</button>
    </form>
  );
}

export default DateForm;

解释

上面的代码示例中有一个 DateForm 组件。这个组件有一个 dates 数组用来存储多个日期。这个数组是通过 useState 钩子来声明的，初始值为空数组。

组件中还定义了一个 handleDateChange 函数，这个函数会在日期输入框的值发生变化时被调用。这个函数会根据输入框的 data-index 属性来确定要更改的日期的位置。如果 data-index 属性不存在，则说明是新增日期，直接将新的日期添加到数组中。如果 data-index 存在，则说明是修改已有的日期，直接替换掉数组中对应位置的日期即可。

组件中还定义了一个 handleAddDate 函数，这个函数会在点击“Add Date”按钮时被调用。这个函数会在数组的末尾添加一个空的日期字符串。

组件中还定义了一个 handleRemoveDate 函数，这个函数会在点击“Remove”按钮时被调用。这个函数会从数组中删除指定位置的日期。

最后，组件中定义了一个 handleSubmit 函数，这个函数会在表单提交时被调用。这个函数会打印出所有的日期，并且可以在这里进行其他操作。

在 DateForm 组件的返回值中，我们使用 map 方法来遍历 dates 数组。对于数组中的每一个日期，会渲染一个日期输入框和一个“Remove”按钮。这个输入框的值和 handleDateChange 函数都绑定了该日期的值和对应的 data-index 属性。点击“Remove”按钮会调用 handleRemoveDate 函数，这个函数会通过指定的位置来删除对应日期。

在表单最后有一个“Add Date”按钮，点击这个按钮会调用 handleAddDate 函数，这个函数会在数组的末尾添加一个空的日期字符串。

最后还有一个提交按钮，点击这个按钮会调用 handleSubmit 函数，这个函数会打印出所有的日期并且可以在这里进行其他操作。

结论

存储日期表单字段中的多个日期可以通过在 ReactJS 中使用数组来实现。在这个数组中，每一个元素都代表着一个日期。我们可以通过输入框的 data-index 属性来确定要更改的日期的位置，也可以在数组的末尾添加新的日期，或者通过指定的位置来删除对应日期。提交表单时，可以打印出所有的日期并且可以在这里进行其他操作。