1
votes

Champ de texte avec uniquement des chiffres - React

J'essaie de faire le champ de texte qui n'acceptera que des nombres au format comme le numéro de téléphone: xxx-xxx-xxx. Je ne veux pas utiliser le format de champ thext de base de type = "nombre". Voici mon code:

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;

javascript reactjs

3 commentaires

Vous utilisez déjà un modèle, donc je pense que la question est "qu'est-ce qu'une expression régulière pour un numéro de téléphone", n'est-ce pas? Dans ce cas, vérifiez ici: stackoverflow.com/questions/16699007/...

Est-ce que ça rend quelque chose? Il vous manque les importations requises

Oui, c'est un champ de rendu dans lequel je peux mettre un nombre mais c'est un champ numérique de base

3 Réponses :

0
votes

Vous pouvez faire quelque chose comme:

            <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)}

Ou, si vous ne voulez pas utiliser l'attribut 'pattern' (ou qu'il ne fonctionne pas), vous pouvez appeler une fonction à la place du setPhone, et la valider avec regex.

1 commentaires

Vous pouvez rechercher un modèle ici: stackoverflow.com/questions/16699007/...

0
votes

J'ai déjà eu ce problème et j'ai trouvé une option plus facile à utiliser car il y aura probablement des bogues dans le champ de saisie qui dépend des navigateurs même si cela fonctionne bien sur l'un d'entre eux. J'ai utilisé directement ce référentiel github qui est également livré avec une bonne interface utilisateur. Je vous recommande de jeter un œil sur https://gitlab.com/catamphetamine/react-phone-number-input .

2 commentaires

Bonne idée, savez-vous comment le styliser car il est vraiment gros et je ne sais pas comment supprimer l'icône

Si vous ciblez svg en css et que vous le faites svg {display: none} dans la classe d'entrée Phone, vous pouvez rendre invisible mais cela dépend de ce que vous voulez changer. Vous pouvez également utiliser la même procédure pour le style d'entrée.

0
votes

Ça y est:

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>
  );
}

vérifier: https://stackblitz.com/edit/react-q2fjbw?file=src%2FApp.js

0 commentaires