Question

我希望用户输入他的名字，但两者之间不能有空格。我尝试使用此代码，但没有达到目的。

            <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不接受onkeypress。我尝试过，但是失败了。 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}
/>

在materialUI TextField中输入文本时如何避免空格？

1 个答案: