web-dev-qa-db-fra.com

Supprimer les espaces blancs des deux extrémités d'une chaîne à l'intérieur d'un formulaire - React

J'ai un formulaire simple qui reçoit le prénom et le nom, et je dois supprimer les espaces blancs au début et à la fin de la chaîne. Je peux le faire avec la méthode .trim(), mais comme c'est un formulaire, il ne me permet pas d'écrire un nom qui a deux mots, comme Ana Maria, car il ne me permet pas d'appuyer sur l'espace touche à la fin d'un mot. Comment puis-je supprimer les espaces blancs des deux côtés d'une chaîne tout en me laissant appuyer sur l'espace et écrire plus d'un mot?

enter image description here

C'est le composant:

export default function ScheduleInput(
  { label, required, onChange, value, ...extraProps },
) {
  return (
    <div className="item_container">
      {label}:
      {required &&
        <span style={{ color: 'red' }}> *</span>
      }
      <br />
      <input
        type="text"
        onChange={onChange}
        value={value.trim()}
        {...extraProps}
      />
    </div>
  );
}
javascriptreactjsformstrim
4
Liz Parody

Au lieu de couper onChange, faites-le dans un rappel onBlur:

<input onBlur={this.props.formatInput} {...} />

Où cela pourrait ressembler à ceci:

formatInput = (event) => {
  const attribute = event.target.getAttribute('name')
  this.setState({ [attribute]: event.target.value.trim() })
}
7
coreyward