Запись данных в массив при вводе пользователем

Question

Я пытаюсь разработать макет React, который выполняет следующие действия:

1. представляет пользователя с календарем и флажками. (Уже сделано)
2. Пользователь может выбрать дату и выбрать параметры из флажков. (Уже сделано)
3. Пользовательский ввод будет записывать в массив следующую информацию (необходимо реализовать) - Дата - параметры, выбранные для этой даты
4. Возможность повторного посещения (щелчка) даты с параметры и показать, какие поля были отмечены, и изменить ввод. (Необходимо реализовать)

Вот мой код:

import React, { Component } from 'react';
import './App.css';
import 'react-calendar/dist/Calendar.css';
import Calendar from "react-calendar";
import Checkbox from './components/Checkbox'

class App extends Component {

  let sympt = [];

  function {
    if (sympt.includes(date)) {
        // check boolean values in sympt to options & change if necessary
    }
    // append sympt to add new record
  };

  render() {
    return (
      <div>
          <Checkbox />
          <Calendar />
      </div>
    );
  }
}

export default App;

checkbox.js

class Checkbox extends Component {

  constructor() {
    super();
    this.state = {
      categories: [
        {id: 1, value: "Symptom 1"},
        {id: 2, value: "Symptom 2"},
        {id: 3, value: "Symptom 3"},
        {id: 4, value: "Symptom 4"}
      ],
      checkedItems: new Map()
    };

    this.handleChange = this.handleChange.bind(this);

  }

  handleChange(event) {
        var isChecked = event.target.checked;
        var item = event.target.value;
        this.setState(prevState => ({ checkedItems: prevState.checkedItems.set(item, isChecked) }));

  }


render() {
  return (
    <div>
    <h1>Add Notes to Calendar</h1>
    <form onSubmit={this.handleSubmit}>
      {
        this.state.categories.map(item => (
          <li>
            <label>
              <input
                type="checkbox"
                value={item.id}
                onChange={this.handleChange}
              /> {item.value}
            </label>
          </li>
        ))
      }

    </form>
</div>
  );
}

}

  export default Checkbox;

Календарь использует react-calendar

Вот что представлено: Календарь и параметры

Я не понимаю, как это сделать:

1. Записывать данные в массив в стандартизированном формате. Я хочу записывать в массив только после того, как выбран параметр, а не только когда выбрана дата.
2. Проверьте массив, чтобы увидеть, есть ли к дате уже прикрепленные параметры, и «повторно отметьте» эти поля.
3. Изменить существующие данные в массиве.

Answer 1

Что вам нужно сделать:

1. Отслеживать выбранную дату в вашем App.js компоненте
2. Отслеживать каждую дату с помощью соответствующих выбранных флажков в вашем Checkbox.js компонент
3. Обновить выбранную дату при изменении календаря (onChange обратный вызов)
4. Обновить флажок на основе новой выбранной даты

Точка 1 и Точка 3:

// In your constructor:
this.state = {
  dateValue: new Date()
};

// A handle to update your local state:
handleDateChange = newDate => {
  this.setState({
    dateValue: newDate
  });
};

// Your calendar:
<Calendar
  onChange={this.handleDateChange}
  value={this.state.dateValue}
/>

Точка 2:

// In your constructor:
this.state = {
  savedValues: {}
};

// When your date change (componentDidMount and componentDidUpdate):
this.setState({
  savedValues: {
    [this.props.selectedDate]: [
      { id: "1", value: "Symptom 1", checked: false },
      { id: "2", value: "Symptom 2", checked: false },
      { id: "3", value: "Symptom 3", checked: false },
      { id: "4", value: "Symptom 4", checked: false }
     ]
  }
});
// Note that I changed id to a string to make it easier to track
// We also need to add a "checked" status

Точка 4:

// In your App.js
<Checkbox selectedDate={this.state.dateValue.getTime()} />
// Note that I used .getTime() to use timestamp instead of a full date
// It is easier to track "123123..." then "Thu Aug 06 2020 16:42:21..."

// Update your current map function to load the checkboxes from your saved state
// Also include the "checked" attribute
this.state.savedValues[this.props.selectedDate].map(item => (
  <li key={item.id}>
    <label>
      <input
        type="checkbox"
        value={item.id}
        onChange={this.handleChange}
        checked={item.checked}
      />{" "}
      {item.value}
    </label>
  </li>
))}

Вот рабочая демонстрация: https://codesandbox.io/s/crimson-morning-e553p

Answer 2

Для вышеупомянутого сценария:

Для записи данных в стандартный формат вы можете использовать map refer [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map]. Примерно так

let calendarMap = new Map();

calendarMap["4-may"] = {
    'options':["Sympt1"],
    'eventTitle':"This is test decription"
}

console.log(calendarMap);

calendarMap["5-may"]={'options':["Symt3"],'eventTitle':'Second event'};
console.log(calendarMap);

Таким образом, вы сможете проверить, есть ли для соответствующей даты варианты выбора или нет, вы можете обновить и удалить данные с карты по датам.

Вы должны выполнить привязку (испустить события из компонента,), чтобы отслеживать действия пользователя.