时间戳

首页 > 解决方案 > 只有数字的文本字段 - React

javascript - 只有数字的文本字段 - React

问题描述

我正在尝试制作仅接受格式为电话号码的数字的文本字段：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;

标签： javascriptreactjs

解决方案

就是这个：

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

推荐阅读