禁用文本框中的空格键-React-JavaScript

在这里，我提供了我的代码，我想禁用文本框中的空格键？在文本框中输入空格键时，我会设置一条警告消息，直到一切顺利。但我希望在点击一条警告信息的“OK”后，屏幕应该和进入空格键之前一样。我的意思是，它（屏幕）应该加载它最初保存的所有数据，要求用户在文本框中输入一些内容

我的代码提供了一个屏幕，文本框中有一个光标（在空格旁边），要求输入下一个输入。我认为这是一个空格键，最重要的是，在点击“确定”警告消息后，屏幕不会恢复到原来的状态。请帮我解决这个问题

代码

从“React”导入React；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
术语：“，
姓名：[
{名字：“鲁尼”，关于：“他是个学生”}，
{名字：“洛奇”，关于：“他是一名球员”}，
{名字：“罗尼”，关于：“他是个歌手”}
],
filteredData:[{}]
};
}
render（）{
让术语=”；
if（本州术语）{
terms=this.state.term.toLowerCase（）；
}
返回(
搜索人：
{
if（event.target.value.indexOf（“”>-1）{
警告（“不允许使用空格”）；
this.setState（{term:}）；
返回；
}
this.setState（{term:event.target.value}）；
}}
/>





{this.state.names&&
这是我的名字
.filter（（x）=>x.name.toLowerCase（）.startsWith（术语））
.map（（项目）=>{
返回(
{item.name}
{item.about}
);
})}
);
}
}
导出默认应用程序；

---

当我将数据从“对象数组”更改为“数组”时，我想做的事情与

名称相同：[“埃隆·马斯克”、“比尔·盖茨”、“蒂姆·库克”、“理查德·布兰森”、“杰夫·贝佐斯”、“沃伦·巴菲特”、“祖克”、“卡洛斯·斯利姆”、“比尔·盖茨”、“拉里·佩奇”、“哈罗德·芬奇”、“谢尔盖·布林”、“杰克·马”、“史蒂夫·鲍尔默”、“菲尔·奈特”、“保罗·艾伦”、“沃兹”]

。当使用与上述相同的代码时，需要进行哪些更改以及在何处进行更改？提前感谢所有帮助人员。

将输入元素中的值更改为

value={this.state.term}

，它将正常工作。此版本会在按空格键后擦除输入值，并像初始渲染一样加载页面

---

但是，如果您想保持输入值与按下空格按钮之前相同，只需删除

this.setState（{term:“}）
 请让我知道，如果它解决了你的问题谢谢你的回答！它工作得很好。您可以在状态didTypeSpace中添加一个属性，在输入空格时设置为true，在关闭模式时设置为false。只要this.state.didTypeSpace为true，就会有条件地显示模态。
import React from "react";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      term: "",
      names: [
        { name: "Roony", about: "He is a student" },
        { name: "Rocky", about: "He is a player" },
        { name: "Ronny", about: "He is a singer" }
      ],
      filteredData: [{}]
    };
  }

  render() {
    let terms = "";
    if (this.state.term) {
      terms = this.state.term.toLowerCase();
    }
    return (
      <div className="App">
        <label>Search Person: </label>
        <input
          type="text"
          value={this.state.name}
          id="searchEmp"
          placeholder="Enter Person's Name"
          onChange={(event) => {
            if (event.target.value.indexOf(" ") > -1) {
              alert("space not allowed.");
              this.setState({ term: "" });
              return;
            }
            this.setState({ term: event.target.value });
          }}
        />
        <br />
        <br />
        <hr />

        {this.state.names &&
          this.state.names
            .filter((x) => x.name.toLowerCase().startsWith(terms))
            .map((item) => {
              return (
                <div className="data-body">
                  <div>{item.name}</div>
                  <div>{item.about}</div>
                </div>
              );
            })}
      </div>
    );
  }
}

export default App;