React JS 中的 if/else 语句中的警报

Question

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

link to codesandbox

我的代码是

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


export default () => {
const [number, setNumber] = useState(" ");

const numberHandleChange = (e) => {
        e.preventDefault();
        const re = /^[0-9\b]+$/;
        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>

            )}

我尝试从 Bootstrap 和 Reactstrap 导入 Alert 以在 else 函数中使用，它不起作用。 警报没有出现，而且输入字段也可以打印字母。

非常感谢任何建议。

谢谢。

Answer 1

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

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

更好的方法是让反应完全控制 DOM 输入 Comment: 5。并且还放了一个错误状态Comment: 2，所以当值无效时，你不用费心去更新它，只要更新错误Comment: 4。

但问题是，当您在输入上分配 value={number} 时，您设置为数字的初始状态，空格 character =" ", Comment: 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-9\b]+$/;
    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>
  );
};

Link to updated Sandbox.

Answer 2

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

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

例如，您可以为 'isError` 声明另一个状态挂钩，并在 else 块中将其设置为 true。

然后您可以在您的 return 语句中使用三元组。有点像，

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

或者，简写： {isError && <Alert>Some text</Alert>}

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

根据您的版本，简写 <> 和 </> 可以解决问题...

Answer 3

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