React 不能为空日期时间本地输入字段

Question

我正在使用 react 和 react-semantic-ui 并且我有以下输入类型：

<Input 
onChange={e => this.onTextInputChange(e, 'date')}
value={this.state.searchQuery.date}
type='datetime-local'/>

onTextInputChange 函数将输入值设置为状态字段，并将此输入的值绑定到此字段。此外，我的应用程序中还有一个额外的按钮，负责清除表单字段（通过在每个状态字段上设置 null）。

state = {
  searchQuery: {
     date: null
 }
}

Clear 对于其他字段效果很好，但是当我触摸 datetime-local 输入时出现问题。当我填写日期的某些部分时，当我点击清除按钮时收到此消息。

我只有在提供完整日期后才能清除此字段。我知道我可以通过在清除期间将此字段的值设置为空白字符串 ' ' 来解决此问题，但这不是最佳解决方案，因为稍后我必须过滤掉这些字段。我什至在玩 react ref，但不幸的是我没有取得任何积极的结果，而且，悬停时出现的蓝色十字会清除表格。任何提示我如何以漂亮的方式处理它？

编辑 #1： event.preventDefault 帮助我摆脱了这个验证消息，但无论如何输入仍然没有清除值。

Answer 1

您需要将 this.state.searchQuery.date 的值设置为空字符串而不是 null。在日期类型的输入中，value={null} 不是有效的 here。这是解决这个问题的唯一方法。如果您特别需要 null 值，则需要将空字符串解析为 null 以避免必须进行过滤。

Value: A DOMString representing a date in YYYY-MM-DD format, or empty

关于蓝色清除按钮，webkit 有一个伪元素 input[type="date"]::-webkit-clear-button 允许您根据需要设置样式。然而，自己实现一个清除按钮非常简单，因为并非所有浏览器都支持通过 CSS 设置按钮样式。

Answer 2

不知何故我找到了处理它的方法。

我在构造函数中做了Ref：

...
 dateRef: any;

  constructor(props: Readonly<Properties>) {
    super(props);

    this.dateRef = React.createRef();
  }
...

为我的输入分配了参考：

<Input
...
type='datetime-local'/
ref={this.dateRef}
...
/>

在 clearForm 方法中，我在 UI 上设置了 ''，在状态中设置了空值。

  private clearForm = (event: React.FormEvent): void => {
    event.preventDefault();
    this.date.current.inputRef.current.value = '';
    this.setState({searchQuery: EMPTY_SEARCH_QUERY});
  }

此外，我通过访问 this.dateRef.current.inputRef.current.validity.valid

来防止输入无效时进行搜索

也许这个解决方案不是最好的，但它确实有效。

React 不能为空日期时间本地输入字段

React can't null datetime-local input field

javascript

reactjs

semantic-ui

semantic-ui-react