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

Question

我想将表单验证消息国际化。我设法使用this solution为标准输入执行此操作。但是对于React Select来说，它的表现略有不同。 Apparently，只需在onChange道具中覆盖onInvalid和inputProps即可。

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

Here是一个CodeSandbox，显示我已经走了多远。第一个Select按预期工作，但使用默认验证消息。第二个Select有自定义消息，但无法按预期工作。 <input/>用于显示嵌入式onChange中未调用<input/>。

请告诉我是否可以按预期行事。

提前致谢。

Answer 1

我设法做something usable但是，正如我在评论中所说，它并不漂亮。如果该链接失效，则需要将required设置为true / false，以便尝试仅显示一次消息，并在消息不可避免地出现时使用setCustomValidity

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