reactjs - Material UI kullanarak kullanıcıların TextField'e harf girmesini nasıl engellerim

Kullanıcının yalnızca pozitif rakam girebileceği bazı TextField'larım var. Şu anda bunu onKeyDown üzerinde yapıyorum:

<TextField
        label={distanceError}
        error={!!distanceError}
        defaultValue={kpoints.distance}
        onBlur={handleDistanceChange}
        **onKeyDown={(evt) =>
          ['+', '-'].includes(evt.key) && evt.preventDefault()
        }**
        InputLabelProps={{
          shrink: true,
        }}
        inputProps={{
          min: 0,
          id: 'distance-input',
          style: {textAlign: 'center'},
        }}
        variant="outlined"
        size="small"
        type="number"
        aria-label="Distance in angstroms input"
      ></TextField>

Bu, kullanıcıların negatif sayı girmesini istemediğim için herhangi bir özel karakteri engeller.

Kullanıcının a-z harflerini girmesini önlemek için buna ne ekleyebilirim?

Ayrıca kullanıcı farklı bir sayı girdiğinde sayının bir stringe dönüştürülmesini de önlemem gerekiyor.

Lütfen yardım edin!

Cevap #1

Veya bunu kullanabilirsiniz. Çünkü diğerleri sadece isNaN kullandıklarında eslint'te hata alabilecekleri AirBnB kılavuzunu kullanıyor.

<TextField
  value={value}
  variant="outlined"
  onChange={(event) => {
    setValue(!Number.isNaN(Number(event.target.value)) ? event.target.value : value);
  }}
  size="small"
/>

Cevap #2

Bir TextField'den (veya input) gelen girdiler her zaman string olarak kabul edilir. Değerin NaN olup olmadığını yardımcı bir fonksiyonla kontrol edebilirsiniz:

const check = (input) => {
  if (isNaN(input)) {
    return false;
  } else {
    return Number(input);
  }
};

Eğer value bir sayıya dönüştürülemeyen bir string ise false döner, aksi takdirde yeni durumunuz olarak ayarlayabileceğiniz bir tamsayı değeri döner.

Güncelleme: bunu dene:

<TextField
  value={value}
  variant="outlined"
  onChange={(event) => {
    setValue(!isNaN(event.target.value) ? event.target.value : "");
  }}
  size="small"
/>