在 React --Edit 中创建“修改日期”值：更新为工作代码答案

【问题标题】：Creating a "date modified" value in React --Edit: updated to working code在 React --Edit 中创建“修改日期”值：更新为工作代码
【发布时间】：2020-04-18 00:49:54
【问题描述】：

我需要获取值被修改的日期/时间，以便我可以更新它的状态，然后通过上下文将它推送到 App.js 中的 addNote 函数。来自 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}
                    />

【问题讨论】：

您希望与从服务器返回的日期时间相匹配的日期时间在哪里？是this.state.modified 吗？
这是我刚刚意识到的问题的另一半。我可以按照下面的回答进行转换，但首先我需要获取开始的值
好吧，这就是我所追求的……价值。
关于如何在不为用户手动输入日期的情况下创建字段的任何建议？
这很简单。您只需创建一个new Date()，这将返回当前日期和时间。如果用户正在输入一些数据，只需等待他们提交，当您绑定模型时，您会为日期创建一个额外字段并使用new Date() 创建Date 的实例。然后你可以使用(new Date()).toISOString() 来转换它。但显然你会把它存储到一个变量中

标签： javascript reactjs time

【解决方案1】：

真正需要注意的地方：

const { modified } = e.target.modified.toISOString() <-----"e.target.modified is undefined" 这是因为你没有在你的constructor() 中绑定你的handleChange() 函数。所以绑定吧。

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

如果您没有为 handleChange 设置 .bind()，您的功能将无法正常工作。因为它不绑定任何东西。了解更多here。我很确定在这样做之后，一切都应该工作。如果没有，请尝试以下建议。

来自React的一些信息

我应该将数据保存在自定义属性中吗？

没有。我们不鼓励您将数据保存在 DOM 属性中。即使必须这样做，data-attribute 也可能是更好的方法，但在大多数情况下，数据应该保存在 React 组件状态或外部存储中。

当您设置了属性后，请尝试实际检查呈现的元素以查看该属性是否被呈现。我建议将数据保存在 data-attribute 上，您可以进一步了解 here 如何将 data-attr 与 react 一起使用。

一个简单的例子：

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

构建您的代码并检查元素以实际检查属性是否使用这些值呈现。这只是为了验证该方法是否有效。然后你可以检索那些属性。

【讨论】：

搞定了！这是几件事的结合，显然你必须先转换日期才能通过它。数据和数据集方法解决了无法识别“this.modified”的问题。我更新了 OP 以表示工作代码。
我不确定为什么在分配值之前必须进行转换，因为它作为字符串存储在属性上，因此不会产生任何影响。但我很高兴也很高兴您找到了解决方案。
stackoverflow.com/questions/39217275/… （显然这是一个错误）。但是，是的，现在一切正常。感谢您的帮助

【解决方案2】：

您正在寻找一个 ISO 字符串来表示 vanilla 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 的时间戳包含尽可能多的有关偏移量的信息，这是一个很好的起点。否则时区管理的一致性会成为后面的问题。

【讨论】：