不允许在带有 React javascript 的文本区域中使用双 space

Question

如果用户试图进行第二次输入，我不想更新文本区域的输入值 space。

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

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

如果使用 space，我已经尝试检查密钥代码而不更新，但问题是我确实想要一个 space，第二个 space 是一个应该使输入值不更新的。我怎样才能做到这一点？

编辑：我不想让人们想用多少就用多少 space，只要不是一个接着一个（没有双 space）

Answer 1

您只想创建一个函数（可以是内联匿名函数，也可以是为了提高可读性而扩展的函数），每次出现多个空格时都会过滤掉并将文本设置为 return功能。

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(''));

不允许在带有 React javascript 的文本区域中使用双 space

Don't allow double space in textarea with React javascript

javascript

textarea

input

reactjs