在材质 UI TextField 中输入文本时如何避免空格？答案

【问题标题】：How to avoid space when entering text in materialUI TextField?在材质 UI TextField 中输入文本时如何避免空格？
【发布时间】：2019-05-18 16:28:08
【问题描述】：

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

            <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

【问题讨论】：

您提供的小提琴工作正常。那有什么问题呢？
是素材ui。
使用 Material UI 设置演示。在代码沙箱中尝试。
如果没有演示，我的想法是像往常一样使用受控组件来删除 handleChange 方法中的空格。
您还需要将 onkeypress 更新为 onKeyPress 并更新组件本身以监视传递的道具，如下所示：inputProps={{ onKeyPress }}

标签： javascript html reactjs material-ui

【解决方案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}
/>

【讨论】：

修剪并不完美，我们可以在字符串中间添加空格。试试这个 => e.target.value.replace(/\s/g, '')