只有数字的文本字段 - React答案

【问题标题】：Text field with only numbers - React只有数字的文本字段 - React
【发布时间】：2020-11-15 18:20:18
【问题描述】：

我正在尝试制作仅接受格式为电话号码的数字的文本字段：xxx-xxx-xxx。我不想使用 type="number" 的基本 thext 字段格式。这是我的代码：

const PatientEditScreen = ({ match }) => {
 const patientId = match.params.id;
 const [phone, setPhone] = useState(0);

useEffect(() => {
    if (!patient.name || patient._id !== patientId) {
      dispatch(listPatientDetails(patientId));
    } else {
      setPhone(patient.phone); 
    }
  }, [dispatch, patientId, patient]);

return (
    <>
      <h1>Edit Patient</h1>
          <Card className="mb-3 border-dark">
            <Card.Body>
              <Form onSubmit={submitHandler}>
                <Form.Row>
                  <Form.Group controlId="phone" as={Col} variant="flush">
                    <Form.Label as="h5">Phone Number</Form.Label>
                    <Form.Control
                      type="number"
                      pattern="[0-9]*"
                      placeholder="Enter Phone Number"
                      value={phone}
                      onChange={(e) => setPhone(e.target.value)}
                    ></Form.Control>
                  </Form.Group>
                </Form.Row>
              </Form>
            </Card.Body>
          </Card>
      )}
    </>
  );
};

export default PatientEditScreen;

【问题讨论】：

您已经在使用模式，所以我认为问题是“什么是电话号码的正则表达式”，不是吗？在这种情况下，请在此处查看：stackoverflow.com/questions/16699007/…
它渲染了什么？？您缺少必需的导入
是的，它是女巫的渲染字段，我可以输入数字，但它是基本数字字段

标签： javascript reactjs

【解决方案1】：

我之前遇到过这个问题，发现更容易使用，因为输入字段中可能会有错误，取决于浏览器，即使它可以在其中一个上正常工作。我直接使用了这个带有良好 UI 的 github 存储库。我建议你看看https://gitlab.com/catamphetamine/react-phone-number-input。

【讨论】：

好主意，你知道如何设置这个样式吗，因为它真的很大，我不知道如何删除图标
如果您在 css 中定位 svg 并在 Phone 输入类中将其设为 svg {display: none} 您可以使其不可见，但这取决于您要更改的内容。您也可以对输入样式使用相同的过程。

【解决方案2】：

就是这样：

import React from "react";
import "./style.css";
export default function App() {
  return (
    <div>
      <input
        class="form-control"
        placeholder="xxx"
        type="text"
        maxlength="3"
        pattern="[0-9]{3}"
      />
      -
      <input
        class="form-control"
        placeholder="xxx"
        type="text"
        maxlength="3"
        pattern="[0-9]{3}"
      />
      -
      <input
        class="form-control"
        placeholder="xxx"
        type="text"
        maxlength="3"
        pattern="[0-9]{3}"
      />
    </div>
  );
}

检查：https://stackblitz.com/edit/react-q2fjbw?file=src%2FApp.js

【讨论】：

【解决方案3】：

你可以这样做：

            <Form.Control
              type="number"
              pattern="^[1-9]\d{3}-\d{3}-\d{3}"
              placeholder="Enter Phone Number"
              value={phone}
              onChange={(e) => setPhone(e.target.value)}

或者，如果您不想使用 'pattern' 属性（或者它不起作用），您可以调用一个函数而不是 setPhone，并在那里使用正则表达式对其进行验证。

【讨论】：

您可以在这里搜索模式：stackoverflow.com/questions/16699007/…