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
 }
}

清除在其他字段上也能很好地工作，但是当我触摸datetime-local输入时就会出现问题。当我填写日期的某个部分时，按清除按钮会收到此消息。

仅当我提供完整日期时，我才能清除此字段。我知道我可以通过在清除过程中将此字段的值设置为空白字符串' '来解决此问题，但这不是最佳解决方案，因为稍后我必须过滤掉这些字段。我什至在玩react ref，但不幸的是我没有取得任何积极的结果，而且，悬停上出现的蓝色叉形清除了表格。有什么技巧可以很好地处理吗？

编辑＃1： event.preventDefault帮助我摆脱了此验证消息，但是无论如何输入都不会清除值。

Answer 1

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

值：一个DOMString，表示YYYY-MM-DD格式的日期，或者为空

关于蓝色的清除按钮，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不能将datetime-local输入字段设置为空

2 个答案: