Javascript 带有React Select的自定义验证消息

我想国际化表单验证消息。我设法用它来实现标准输入。不过，对于React Select，它的行为有点不同，只需在

inputProps

prop内重写

onChange

和

onInvalid

但是，当其值更改时，嵌入式

似乎不会启动其

onChange

函数。这意味着，一旦

Select

无效，它将永远不会变回有效。另一件可能相关的事情是，选择一个选项后，嵌入的

的值为

null

是一个代码沙盒，显示了我有多远。第一个

Select

按预期工作，但带有默认的验证消息。第二个

Select

具有自定义消息，但无法按预期工作。

显示嵌入式

中没有调用

onChange

请让我知道是否有可能使其按预期运行

提前谢谢。

我设法做到了，但正如我在评论中所说的，这并不漂亮。如果该链接失效，则需要将

required

设置为

true

/

false

，以尝试使消息只出现一次，并在消息不可避免地出现时使用

setCustomValidity

---

我将在React Select中提出一个问题，因为我认为必须有更好的方法，如演示中的pure

示例所示，消息对我来说会消失（尽管在第一次选择这两个选项后确实会出现）我又做了一些测试，似乎只有在

Select

的

onBlur

事件在键入任何内容之前触发时，消息才会消失。我还发现，使用

Select

的

onInputChange

可以在键入后删除消息，但在进一步交互后会返回默认的浏览器消息。我试图让它表现得像预期的那样，但不管怎样，结果都是一团糟。。消息或多或少只在我需要的时候出现，而默认消息似乎不再出现。唯一的问题是，即使调用了

onOpen

，它也没有效果，应该清除输入，以便用户可以搜索其他选项。更新了示例。现在可以禁用验证了。建议将

Select

包装到另一个组件中，以便将

required

作为道具传递，以启用/禁用验证。