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

Question

我在这里提供了我想在文本框中禁用空格键的代码？我在文本框中输入空格键时设置了一条警告消息，直到这里一切顺利。但我希望在单击警告消息的“确定”后，屏幕应该与输入空格键之前的屏幕相同。我的意思是它(屏幕)应该加载它最初保存的所有数据，并要求用户在文本框中输入内容。

我的代码在文本框中提供了一个带有光标(空格键旁边)的屏幕，要求输入下一个输入。我认为它需要一个空格键，最重要的是，在单击警报消息的“确定”后，屏幕不会回滚到其原始状态。请帮我解决这个问题。

代码

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;

当我将数据从 'array of objects' 更改为 'array' 作为 names: ["Elon Musk","Bill Gates","Tim Cook", “理查德布兰森”，“杰夫贝佐斯”，“沃伦巴菲特”，“扎克”，“卡洛斯斯利姆”，“比尔盖茨”，“拉里佩奇”，“哈罗德芬奇”，“谢尔盖布林”，“马云”， “史蒂夫·鲍尔默”、“菲尔·奈特”、“保罗·艾伦”、“沃兹”]。使用与上面相同的代码时需要进行哪些更改以及在哪里进行更改？提前感谢所有帮助者。

Answer 1

将输入元素中的值更改为 value={this.state.term}，它将正常工作。此版本在按下空格键后删除输入值并像初始渲染一样加载页面。 Sandbox

但是，如果您想保持输入值与按下空格键之前的值相同，只需删除 this.setState({ term: ""});。 sandbox