Question

我有一个表单，我想设置一个输入文本字段以显示当前日期和时间：

我具有以下功能：

const getDateTime = () => {
  let tempDate = new Date();
  let date = tempDate.getFullYear() + '-' + (tempDate.getMonth()+1) + '-' + tempDate.getDate() +' '+ tempDate.getHours()+':'+ tempDate.getMinutes()+':'+ tempDate.getSeconds(); 
  const currDate = "Current Date= "+date;
  return (
     {currDate}
  );
}

输入文字字段的

：在构造函数中，我设置状态：

reportStartDate: '',

超文本设置如下：

<div className="form-group">
                <label htmlFor="reportStartDate">Report Start Date:</label>
                <input type="text" name="reportStartDate" className="form-control" placeholder="Report Start Date" value={this.state.reportStartDate} onChange={e => this.change(e)} />
              </div>

如何获取当前日期和时间以显示在文本字段中？

Answer 1

使用setState()函数-有关更多信息，请参见this

const getDateTime = () => {
  let tempDate = new Date();
  let date = tempDate.getFullYear() + '-' + (tempDate.getMonth()+1) + '-' + tempDate.getDate() +' '+ tempDate.getHours()+':'+ tempDate.getMinutes()+':'+ tempDate.getSeconds(); 
  const currDate = "Current Date= "+date;
  this.setState({ reportStartDate: currDate})
}

Answer 2

如果我正确地理解了您的问题，那么当最初显示输入字段时，您需要为输入字段设置当前日期和时间，

首先在构造函数中设置带有当前日期和时间的reportStartDate，以便在用户选择首选日期和时间之前输入字段将首先显示当前日期。

     constructor(props){
         super(props);
              this.state = {
                   reportStartDate: getDateTime()
              }
      }

现在更改返回行中的getDateTime点

      const getDateTime = () => {
          let tempDate = new Date();
          let date = tempDate.getFullYear() + '-' + (tempDate.getMonth()+1) + '-' + tempDate.getDate() +' '+ tempDate.getHours()+':'+ tempDate.getMinutes()+':'+ tempDate.getSeconds(); 
          return date;
       }

请确保在用户更改日期时间时使用setState更改事件处理程序功能中的状态

ReactJS如何设置输入文本字段显示当前日期和时间？

2 个答案: