使用 React javascript 时不允许文本区域中的双倍空格

Question

如果用户试图腾出第二个空格，我不想更新文本区域的输入值。

现在我正在使用onChange来更新文本的状态

onChange = {(e) => setText(e.target.value)}

我试着检查keyCode，如果使用了空格，则不更新，但问题是我确实想要一个空格，第二个空格应该使输入值不更新。我怎样才能做到这一点？

编辑：我不想让人们使用他们想要的空间，只要不是一个接一个(没有双倍空间(

Answer 1

您只需要创建一个函数(为了可读性，可以是内联匿名函数，也可以是扩展函数(，每当有多个空格时，该函数就会过滤掉，并将文本设置为该函数的返回值。

onChange = {(e) => setText(e.target.value.split('').filter((val1, index, arr) => ind == 0 || val1 !== ' ' || arr[ind-1] !== ' ').join('')}

const oneSpace = (val1, ind, arr) => {
if (ind == 0) return true;
if (val1 !== ' ') return true;
const val2 = arr[ind-1];
if (val2 !== ' ') return true;
return false;
}
const str1 = "This is a string";
console.log(str1.split('').filter(oneSpace).join(''));
const str2 = "This  is  a  string  with  double  spaces";
console.log(str2.split('').filter(oneSpace).join(''));
const str3 = "This   is   a   string   with   triple   spaces";
console.log(str3.split('').filter(oneSpace).join(''));
const str4 = "This is      a           string        with                random       spaces";
console.log(str4.split('').filter(oneSpace).join(''));