使用React Select的自定义验证消息

Question

我想国际化表单验证消息。 我设法使用此解决方案对标准输入执行此操作 。 但是，对于React Select，它的行为有所不同。 显然 ，所有需要的是覆盖onChange和onInvalid内部inputProps道具。

但是，似乎嵌入式<input/>的值更改时不会触发其onChange函数。 这意味着，一旦Select无效，它就永远不会变回有效状态。 可能相关的另一件事是，在选择选项后，嵌入的<input/>的值为null 。

这是一个CodeSandbox，显示了我走了多远。 第一个Select可以正常工作，但是带有默认的验证消息。 第二个Select具有自定义消息，但不能按预期方式工作。 <input/>表示在嵌入式<input/>未调用onChange 。

请让我知道是否有可能使其表现出预期的效果。

提前致谢。

Answer 1

我设法做了一些有用的事情，但是，正如我在评论中说的那样，这并不漂亮。 如果该链接失效，则需要将required设置设置为true / false ，以尝试使消息仅显示一次，并在不可避免地出现消息时使用setCustomValidity 。

我将在React Select中提出一个问题，因为我认为必须有更好的方法，如示例中使用纯<input/> 。