Как избежать пробела при вводе текста в материале TextField?

Question

Я хочу, чтобы пользователь ввел свое firstName, но без пробелов между ними.Я пытался использовать этот код, но он не служит цели.

            <TextField
                   required
                   id="name"
                   label="First Name"
                   name="firstName"
                   className={classes.textField}
                   margin="normal"
                   defaultValue={firstName}
                   onkeypress="return AvoidSpace(event)"
               />

Вот функция, которую мы используем.

function AvoidSpace(event) {
    var k = event ? event.which : window.event.keyCode;
    if (k == 32) return false;
}

Вот ссылка на код. jsfiddle

Кажется, что TextField не принимает нажатие клавиш.Я пытался, но это не удалось.https://codesandbox.io/s/1o0mqk2mm3

Answer 1

Вы должны передать onChange в TextField и использовать состояние для обработки изменения:

onChange = (e) => {
  this.setState({firstName: e.target.value.trim()})
}

<TextField
    required
    id="name"
    label="First Name"
    name="firstName"
    className={classes.textField}
    margin="normal"
    defaultValue={firstName}
    onChange={this.onChange}
/>