Question

我的项目中有一个日期字段，用于支付日期。当我第一次输入日期时，它将使用输入的日期值并将其显示在字段中。

提交值后，我再次从API提取中检索到该值，但date字段未显示该值。我认为问题在于日期格式。提交日期的格式为DD-mm-yyyy。请帮我修复它。

handlePaidDateChange = (e) =>
  {
    this.setState({ paidDate: e.target.value });
    console.log(this.state.paidDate);

  }

----------------

<div className="row">
  <div className="col m4 s4">
    <h6>Paid Date:</h6>
  </div>
  <div className="col m8 s8">
    <input id="paidDate" type="date" onChange={ this.handlePaidDateChange } value={ this.state.paidDate } />
  </div>
</div>

Answer 1

使用文字而不是日期：

<div className="col m8 s8">
   <input id="paidDate" type="text" onChange={ this.handlePaidDateChange } value={ this.state.paidDate } />
</div>

这实际上与React无关。对于值，Chrome希望日期的值采用YYYY-MM-DD格式。

Answer 2

请确保值（this.state.paidDate）采用此处提到的正确日期格式-> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

const jsx = (
<div className="row">
  <div className="col m4 s4">
    <h6>Paid Date:</h6>
  </div>
  <div className="col m8 s8">
    <input id="paidDate" type="date"  value={ '2005-06-07' } />
  </div>
</div>
  );

ReactDOM.render(jsx, document.getElementById("app"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

日期字段保留其值，但不显示它

2 个答案: