javascript - 当输入类型='date'被清除时如何捕获？

Question

我试图捕捉我的日期输入何时清除为“MM/DD/YYYY”。我不希望我的输入永远是“MM/DD/YYYY”。我怎样才能捕获它并在清除后更改其值？我的函数看起来像这样，但似乎不起作用。

   handleChange = event => {
        if(isNaN(event.target.value)){
         event.target.value = moment().format("MM/DD/YYYY");
         return;
        }
         this.setState({date: event.target.value});
        }

Answer 1

您是否使用date类型的原生HTML输入元素？

<input type="date" />

如果是，则空输入 ('MM/DD/YYYY') 会简单地解释为空字符串''。

首先，我们必须在组件内维护日期状态，并且输入值将映射到date的值。然后，在 onChange 事件中，如果输入值为空字符串，您可以通过使用 更新状态，将 if 语句中的日期重置为今天的日期setState()，并用今天的日期更新值。

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      date: ""
    };
  }
  onChange = e => {
    const date = e.currentTarget.value;
    if (date === "") {
      this.setState({
        date: moment().format("YYYY-MM-DD")
      });
    } else {
      this.setState({
        date
      });
    }
  };

  render() {
    const { date } = this.state;

    return <input type="date" value={date} onChange={e => this.onChange(e)} />;
  }
}

我已经通过 here 创建了一个演示