只有數字的文本字段 - React

Question

我正在嘗試做只接受電話號碼格式的數字的文本字段：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;

Answer 1

我之前遇到過這個問題，並找到了更容易使用的選項，因為輸入字段中可能會有錯誤取決於瀏覽器，即使它在其中一個上運行良好。 我直接使用了這個 github 存儲庫，它也帶有很好的 UI。 我建議你看看https://gitlab.com/catamphetamine/react-phone-number-input 。

Answer 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

Answer 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，並在那里使用正則表達式對其進行驗證。