使用 React javascript 不允许在 textarea 中使用双倍空格

Question

如果用户尝试创建第二个空格，我不想更新 textarea 的输入值。

现在我使用 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(''));