限制输入HTML字段中的空格

我正在使用React编写一个网站,我遇到了一个有趣的问题。

我有一个简单的组件,用户可以在其中输入文本。该组件是使用HTML输入字段实现的。

 const Title = () => {
  return (
      <span>
        Name title
      </span>
      <input
        id="name_title"
        onChange={(event) => setNameTitle(event.target.value)}
        value={NameTitle}
      />
  );
};

export default Title;

我的问题是处理空间。默认情况下,不会以任何方式处理空格,因此,用户可以输入任意数量的空格。但正如你所理解的,这是不对的。我想:

1. 禁止在带有空格的字段中开始输入。也就是说,使得用户不能输入空间作为字段中的第一个字符;
2. 限制单词之间的空格数。不超过一个。也就是说,一个空格后面不能跟一个空格。

我认为这是一件非常有用的事情,但不幸的是,我完全没有发现关于这个问题的信息。告诉我如何解决这个问题