Alert in if/else statement in React JS

Question

我正在尝试使用 if/else 语句验证 React JS 组件中的电话号码输入。如果用户键入字母而不是数字，我想显示一条消息("请检查电话号码"(。到目前为止，我能够创建一个函数，用于检查输入值是否仅为数字，但是如果用户输入字母，我无法弄清楚如何显示消息警报(如在 Bootstrap/reactstrap 中(。

链接到代码沙盒

我的代码是

import React, { useState } from "react";
import { Alert } from "reactstrap";

export default () => {
const [number, setNumber] = useState(" ");
const numberHandleChange = (e) => {
e.preventDefault();
const re = /^[0-9b]+$/;
if (e.target.value === "" || re.test(e.target.value)) {
setNumber(e.target.value);
console.log(e.target.value);
} else {
alert("please check your phone number");
}
};
return(
<label htmlFor="phone">
<h5>Phone</h5>
<input
type="tel"
name="phone"
id="phone"
placeholder="+0 000 00 00"
onChange={numberHandleChange}
/>
</label>
)}

我尝试从引导程序和反应程序导入警报以在 else 函数中使用，但它不起作用。 警报未显示，输入字段也允许打印字母。

任何建议将不胜感激。

谢谢。

Answer 1

@Lema，我认为，如果您控制输入的状态，则最好在使用onChange事件处理程序更新该状态时分配该状态的值。

一些注意事项：在第 5 行：您声明number状态，并在第 11 行的输入更改时始终更新它，但您不会将其分配给任何地方。您还导入了 reactstrapAlert但没有使用它，而是使用浏览器警报(我想知道您是否认为它们可能已连接！浏览器警报劫持反应状态更新并暂停其他浏览器事件，一旦它被关闭，我们就会看到分配给表单的无效值，就像处理程序正则表达式捕获它一样！

更好的方法是让反应完全控制 DOM 输入 注释：5.并放置一个状态的错误片段 注释：2，因此当值无效时，您不必费心更新它，而只需更新错误注释：4。

但问题是，当你用你设置为数字的初始状态分配输入value={number}时，一个空格character =" "，注释：1，它在e.target.value === "" || re.test(e.target.value失败，并且总是返回else错误。也许这就是您首先从输入中删除该值的原因。所以我更新了它以将初始状态设置为根本没有字符，它工作正常。

---

import React, { useState } from "react";
// import { Alert } from "reactstrap";
import "./styles.css";
export default () => {
const [number, setNumber] = useState(""); // 1. Note, no space between the quotes
const [error, setError] = useState(""); // 2. Track the error in the input
const numberHandleChange = e => {
e.preventDefault();
const re = /^[0-9b]+$/;
if (e.target.value === "" || re.test(e.target.value)) {
setNumber(e.target.value);
setError("");  // 3. Clear the error if input is valid
console.log(e.target.value);
} else {
// alert("please check your phone number");
// 4. Set the error on invalid input
setError("❌ Only accept number characters between 0-9");
}
};
return (
<label htmlFor="phone">
<h5>Phone</h5>
<input
type="tel"
name="phone"
id="phone"
placeholder="+0 000 00 00"
value={number} // 5. Give react total control over the input.
onChange={numberHandleChange}
/>
{error && <span className="error">{error}</span>}
</label>
);
};

链接到更新的沙盒。

Answer 2

您的输入字段未绑定到您使用setState声明的数字变量 添加value={number}作为输入的道具。

不能从函数输出 DOM 元素。 通常，你会声明一个错误变量并有条件地输出一个 ReactAlert。

例如，你可以为"isError"声明另一个状态钩子，并在你的else块中将其设置为true。

然后，您可以在 return 语句中使用三元。像这样，

{isError? <Alert>Some text</Alert> : false}

或者，速记：{isError && <Alert>Some text</Alert>}

只是一个想法，什么会消除此警报？ 此外，您将需要一个 React 片段来包装新的 Alert 元素。

根据您的版本，速记<>和</>将解决问题...

Answer 3

警报显示在我的屏幕上，代码的逻辑似乎很好。也许您以某种方式阻止弹出窗口？代码沙箱按预期工作。输入字段让打印字母是什么意思？通常，React 使用带有Alert的警报。您可以导入此内容。您也可以将 if 和 else 语句与此一起使用。