Question

我是ReactJS的新手，我一直在研究一个简单的任务管理器程序，该程序将任务添加到列表中，并在用户单击添加按钮时将每个项目打印到网页上。我的这部分工作正常，但现在我想添加一个时间戳，该时间戳会自动更新，以在要从网页内打印的任务旁边。因此，例如，当用户在输入框中输入一个字符串（例如complete project，然后单击添加后，而不是打印complete project时，它将打印10/03/2018, 3:25:00 PM, complete project。

从下面的addItem方法可以看出，我可以获取时间戳以及正确的格式来打印到控制台。我的问题是，我该怎么做才能将其正确打印到下面列出的App.js渲染函数中的网页上？对此的任何帮助将不胜感激（注意：我不知道这是否与解决此问题有关，但是在页面底部，我还列出了我在{中引用的TodoItems.js组件{1}}渲染函数（正在创建任务）。

这里是App.js addItem函数。

App.js

这是我的//add items to the list on click addItem(e) { var itemArray = this.state.items; const timestamp = Date.now(); if (this._inputElement.value !== "") { itemArray.unshift( { text: this._inputElement.value, key: Date.now() } ); this.setState({ items: itemArray }); this._inputElement.value = ""; } console.log(new Intl.DateTimeFormat('en-US', {year: 'numeric', month: '2-digit',day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'}).format(timestamp),itemArray); e.preventDefault(); }渲染函数（到目前为止，我一直在尝试在此代码中间的“ taskContainer” div中进行更改。

App.js

render() { return ( <div className="App"> <nav className="navbar pure-menu pure-menu-horizontal"> <img src="/vandelay_industries.jpeg" alt="img" width="128" height="120" ></img> <a href="#" className="pure-menu-heading pure-menu-link">File Upload DApp Using IPFS</a> </nav> <main className="container"> <div className="pure-g"> <div className="pure-u-1-1"> <div className="taskContainer"> <form onSubmit={this.addItem} > <input ref={(a) => this._inputElement = a} placeholder="Enter comments"> </input> <button type="submit">add</button> </form> <TodoItems entries={this.state.items} delete={this.deleteItem}/> </div> <h1>Image</h1> <p>This image will be stored on IPFS & The Ethereum Blockchain</p> <img src={`https://ipfs.io/ipfs/${this.state.ipfsHash}`} alt=""/> <h2>Upload Image</h2> <form onSubmit={this.onSubmit} > <input type='file' onChange={this.captureFile} /> <input type='submit' /> </form> </div> </div> </main> </div> ); } }组件

TodoItems.js

Answer 1

无论使用什么console.log。

将其设置为状态

<span>

稍后您应该可以使用：


this.setState({date: new Intl.DateTimeFormat('en-US', {year: 'numeric', month: '2-digit',day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'}).format(timestamp),itemArray}});

内部渲染功能。

Answer 2

解决方案非常简单。如果在输入语句后添加时间戳，则它将打印到网页上。这是更新的addItem（e）方法，其中包括：

addItem(e) {
    var itemArray = this.state.items; 

    let timestamp = new Date();
    let date = new Intl.DateTimeFormat('en-US', {year: 'numeric', month: '2-digit',day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'}).format(timestamp)

    if (this._inputElement.value !== "") {    
      itemArray.unshift(
        { 
          text: this._inputElement.value + " " + date,      
          key: Date.now()  
        }

      );

      this.setState({      
        items: itemArray 
      }); 

      this._inputElement.value = "";  
    }   

    //console.log(new Intl.DateTimeFormat('en-US', {year: 'numeric', month: '2-digit',day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'}).format(timestamp),itemArray);   
    console.log(new Date(),itemArray);   

    this.setState({date: new Intl.DateTimeFormat('en-US', {year: 'numeric', month: '2-digit',day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'}).format(timestamp)});

    e.preventDefault();
  }

用户单击添加按钮时如何在JSX / React JS中添加更新的时间戳

2 个答案: