时间戳

首页 > 解决方案 > 使用 React Select 自定义验证消息

javascript - 使用 React Select 自定义验证消息

问题描述

我想国际化表单验证消息。我设法使用此解决方案为标准输入做到这一点。但是，对于 React Select，它的行为有点不同。显然，所需要的只是覆盖onChange一个onInvalid道具inputProps。

然而，当它的值改变时，嵌入式似乎<input/>并没有触发它的功能。onChange这意味着，一旦Select无效，它就永远不会变回有效。可能相关的另一件事是嵌入<input/>的值是null在选择选项之后。

这是一个 CodeSandbox，它显示了我已经走了多远。第一个Select按预期工作，但使用默认验证消息。第二个Select有自定义消息，但不能按预期工作。<input/>那里表明onChange没有在嵌入式中被调用<input/>。

请让我知道是否可以使其按预期运行。

提前致谢。

标签： javascripthtmlreactjsvalidationreact-select

解决方案

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

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

推荐阅读