Создание значения «дата изменения» в React --Edit: обновлено до рабочего кода

Question

Мне нужно получить дату / время изменения значения, чтобы я мог обновить его в состоянии, а затем передать sh через контекст в функцию addNote в приложении. js. Один пример с сервера json - «2019-01-03T00: 00: 00.000Z». Поэтому мне нужны дата и время, чтобы соответствовать этому формату.

export class AddNote extends Component {
    state = {
        id: '',
        name: '',
        modified: '', 
        folderId: '',
        content: ''
    }

    static contextType = Context;

    handleChange = (e) => {
     const { modified } = e.target.dataset.modified; <---------
        this.setState({
            id: e.target.id, 
            name: e.target.value, 
            modified: {modified}, 
            folderId: e.target.dataset.folderId
        })
    }

render() {
        const id = uuidv4();
        const folderId = uuidv4();
        const date = new Date() <-------------------
        const isoString = date.toISOString(); <-------------

        return (
            <div>
                <form 
                    onSubmit={this.handleSubmit}
                    className='AddNoteForm'
                >
                    <h2>Add Note</h2>
                    <label>Name: </label>
                    <input 
                        type="text"
                        id={id}
                        value={this.state.name}
                        data-folderId={folderId}
                        data-modified={isoString} <------------
                        onChange={this.handleChange}
                    />

Answer 1

Что-то, что нужно на самом деле. Примечание:

const { modified } = e.target.modified.toISOString() <-----"e.target.modified is undefined" Это потому, что вы не связали свою функцию handleChange() с constructor(). Так что свяжите это.

constructor(props)
{
  super(props);
  this.handleChange = this.handleChange.bind(this);
}

Если вы не установили .bind() для этого handleChange, ваша функция не будет работать должным образом. потому что это ни к чему не обязывает. Узнайте больше здесь . Я уверен, что после этого все должно работать. Если нет, попробуйте следующие рекомендации.

---

Некоторая информация из Реагирует

Должен ли я хранить данные в пользовательских атрибутах?

Нет. Мы не рекомендуем вам хранить данные в атрибутах DOM. Даже если это необходимо, атрибуты данных, вероятно, являются лучшим подходом, но в большинстве случаев данные должны храниться в состоянии компонента React или во внешних хранилищах.

---

Поскольку вы установили свой атрибут, попытаться фактически проверить визуализированный элемент, чтобы увидеть, отображается ли этот атрибут. Я бы посоветовал сохранить данные на data-attribute, которые вы можете узнать далее здесь , как использовать data-attr с реагировать.

A Быстрый пример:

<input 
    type="text"
    id={id}
    value={this.state.name}
    data-folderId={folderId} // add data-
    data-modified={date} <------------ //add data-
    onChange={this.handleChange}
/>

Создайте свой код и проверьте элемент, чтобы фактически проверить, отображаются ли атрибуты с этими значениями. Это просто чтобы убедиться, что подход работает. Затем вы можете получить эти атрибуты.

Answer 2

Вы ищете строку ISO, представляющую объект datetime в ванили JS. Если у вас есть объект datetime, вы можете вызвать нижеприведенное, чтобы правильно вывести вышеприведенное.

const event = new Date('05 October 2011 14:48 UTC');
console.log(event.toString());
// expected output: Wed Oct 05 2011 16:48:00 GMT+0200 (CEST)
// (note: your timezone may vary)

console.log(event.toISOString());
// expected output: 2011-10-05T14:48:00.000Z

Ниже приведена ссылка на документы Mozilla, где это описано.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toISOString

Одна вещь, на которую следует обратить внимание при рассмотрении отметок времени для события, ведение журнала, метрики или что-нибудь еще. Примите решение на раннем этапе о формате, в котором вы будете сохранять данные метки времени, и придерживайтесь их, которые после проб и ошибок соответствуют стандартным временным меткам ISO8601, которые включают в себя как можно больше информации о смещении, и это хорошее место для начала. В противном случае согласованность управления часовыми поясами станет проблемой позже.