在 React 中更改所需的输入消息

Question

我需要更改 React 中的警报（请填写此字段）。

例子：

一个表单组件和一个输入组件。

PD：我可以在一个简单的 HTML 和 JS 中做到这一点，但我无法让它与 React 一起使用

PD2：我知道我可以使用声明来验证和抛出自定义错误消息，但我只需要使用所需的警报提示即可

Answer 1

您可以在要更改警报的输入组件中应用这段代码：

htmlInput.oninvalid = function(e) {
    e.target.setCustomValidity("Here is your text!");
};

这里还有一个在组件中使用的示例：

componentDidMount(){
    var htmlInput = document.getElementById("id");
    htmlInput.oninvalid = function(e) {
        e.target.setCustomValidity("This can't be left blank!");
    };
}

Answer 2

这些答案都没有帮助我，这是最简单的方法只需将其添加到您的道具前：

  onInvalid={e => e.target.setCustomValidity("Code is required")}

Answer 3

我设法解决了这个问题

onInvalid={F => F.target.setCustomValidity('Enter User Name Here')} 
onInput={F => F.target.setCustomValidity('')}