Обрабатывать несколько DatePicker в reactjs

Question

Я реализовал DatePicker и Timepicker с кнопками добавления, удаления в каждой строке. Когда я нажимаю на кнопку «Добавить», добавляется новая строка, а «Удалить» удаляет строку.

У меня есть кодовая ссылка https://codesandbox.io/s/zen-water-tfyoz?fontsize=14&hidenavigation=1&theme=dark Но как обработать состояние для нескольких средств выбора даты и времени,

При изменении Дата, это не отражает изменение в поле. https://codesandbox.io/s/zen-water-tfyoz?fontsize=14&hidenavigation=1&theme=dark

Answer 1

Итак, проблема в вашей функции renderRowData:

<td key={`tableview-td-${rowId}-${index}`}>
  {column.dataFieldId === "pickdate" ? (
    <DatePicker
      locale="en-GB"
      className="datepicker"
      name={"pickdate_" + rowId}
      onChange={e =>
        this.handleDatePicker(
          e,
          "pickdate_" + rowId,
          column.dataFieldId,
          row
        )
      }
      value={this.state.pickdate}
    />
  )

Для значения u используйте this.state.pickdate, но когда значение изменяется, вы устанавливаете его с помощью:

  handleDatePicker = (value, name, field, row) => {
    this.props.handleInputChange(value, field, row);
    console.log("data", value, "for", name);
    this.setState({ [name]: value });
  };

, который означает, что ваше состояние сейчас:

{
   ["pickdate_" + rowId]: value // where row is selected row
}

вам нужно изменить свой указатель даты, чтобы получить доступ к значению, как это:

<td key={`tableview-td-${rowId}-${index}`}>
  {column.dataFieldId === "pickdate" ? (
    <DatePicker
      locale="en-GB"
      className="datepicker"
      name={"pickdate_" + rowId}
      onChange={e =>
        this.handleDatePicker(
          e,
          "pickdate_" + rowId,
          column.dataFieldId,
          row
        )
      }
      value={this.state["pickdate_" + rowId] || this.defaultPickDate} // this will take new selected value or default if there is none
    />
  )

Рабочий пример: https://codesandbox.io/s/funny-fog-1v9o3

Answer 2

Причина, по которой изменения поля даты не отражаются в пользовательском интерфейсе, заключается в том, что вы реализовали его как контролируемый компонент (вы устанавливаете значение каждого DatePicker на основе соответствующего значения в состоянии и обновляете состояние, когда Вы изменяете значение, которое эффективно синхронизирует компонент с состоянием (более или менее), тогда как TimePickers действительно изменяют пользовательский интерфейс при выборе нового времени, потому что они реализованы как неуправляемые компоненты. Контролируемые компоненты часто являются лучшим методом, но ваш компонент даты не обновляется при изменении, потому что есть проблемы в вашей функции handleDatePicker, как указано в ответе Kaca992.

Если вы не знаете много о контролируемом против неконтролируемые компоненты см. здесь .

Что касается обработки состояния для нескольких DatePickers и TimePickers, лично я бы рекомендовал хранить их в виде массива строк в состоянии. Например, это будет состояние по умолчанию:

this.state = {
  rows: [
    {
      date: new Date(),
      start: moment(),
      end: moment(),
    }
  ]
}

Каждый элемент строки в массиве будет соответствовать строке в таблице, и вы можете просто использовать array.map для отображения каждой строки как компонента, который содержит DatePicker, TimePickers и кнопки, а затем просто отправляет индекс массива вместе с новым значением в функции onChange, чтобы изменения в правильной строке могли отражаться в новом состоянии.

Для этого потребуется немного переписать ваш класс DynamicDateTimePicker, но logi c будет намного проще и удобочитаемее, чем то, как вы его структурировали в настоящее время.