javascript - 当 "onChange"已为不同功能保留时，如何避免在 react 输入字段中使用空格？

Question

我有一个带有“onChange”事件的输入字段，它使用“forEach”方法获取数组的元素，并且效果很好。但我还想在输入字段中添加一项附加功能 - 避免输入空格。我应该如何附加这个附加功能？

我尝试使用“onKeyDown”事件来避免空格，但可能会出现错误。下面是输入字段的代码:

ma​​inList.js

<input
type="text"
className="form-control"
value={sprNotDeleted.value}
onKeyDown= 
{this.AttributeValidation(sprNotDeleted.value)}
onChange={this.inputChanged.bind(
this,
sprNotDeleted.id
)}
/>

inputChanged()

inputChanged = (index, e) => {
    const { sprNotDeleted } = this.state;
    sprNotDeleted.forEach(point => {
      point.value = point.id === index ? e.target.value : point.value;
    });
    this.setState({ sprNotDeleted, isEdit: false });
  };

属性验证()

 AttributeValidation(value) {
    this.setState({
      sprNotDeleted: value.replace(/\s/g, "")
    });
  }

如果我使用“onKeyDown”，则会出现相应的错误: 类型错误:sprNotDeleted.map 不是函数

Answer 1

观察到，对于 onKeyDown 您没有将事件绑定(bind)到此。

onKeyDown= {this.AttributeValidation.bind( 这， sprNotDeleted.value )}

<input
    type="text"
    className="form-control"
    value={sprNotDeleted.value}
    onKeyDown= {this.AttributeValidation.bind(
    this,
    sprNotDeleted.value
    )}
    onChange={this.inputChanged.bind(
    this,
    sprNotDeleted.id
    )}
/>

当您访问此范围时，建议使用此bind()

您可以尝试使用模式正则表达式处理作为输入类型文本，而不是通过 onKeyDown() 进行处理，您可以通过模式本身来处理它吗？

<input 
    type="text" 
    pattern="[^\s]+"
/>

祝你编码愉快!!