如何在反应中从第一个和最后一个中删除空格答案

【问题标题】：how to remove white space from first and last in react如何在反应中从第一个和最后一个中删除空格
【发布时间】：2022-01-10 07:10:22
【问题描述】：

我不想在输入之前和输入之后有任何空格，比如“text”和“text”不允许，所以我替换了空格，但是当我们从记事本复制“text”并粘贴到输入并想要删除它会引发错误的空间，例如“无法读取未定义读取目标的属性”。所以当用户给前后空间提供空间时如何自动替换空格

  const handleKeyDown = (e) => {
    if (e.key === " ") {
      e.preventDefault();
    }
    
  };
  const handleChangeWhiteSpace = (e) => {
    if (e.target.value.includes(" ")) {
      e.target.value = e.target.value.replace(/\s/g, "");
    }
  };

<MyInput
                          type="text" style={{width:'240px'}}
                          error={formik.errors.input && formik.touched.input}
                          value={formik.values.input}
                          onBlur={formik.handleBlur}
                          onChange={(e)=>{formik.handleChange(e);handleChangeWhiteSpace()}}
                          onKeyDown={handleKeyDown}
                          name="input"
                          id="input"
                          autoFocus={false}
                          autoComplete="off"
/>

【问题讨论】：

修剪 - w3schools.com/jsref/jsref_trim_string.asp
如果target 未定义，你可以试试currentTarget。不确定您的 DOM 的确切布局，但这可能是一种解决方法。
另外，您需要将e 传递给handleChangeWhiteSpace 函数调用
在 handleChangeWhiteSpace 我也定义了 replace() 但是当我们想用空格粘贴时它会抛出错误“无法读取未定义读取目标的属性

标签： javascript reactjs regex

【解决方案1】：

使用正则表达式，以下应该可以工作，您可以在regex101 进行测试：

e.target.value = e.target.value.replace(/^[ \t]+|[ \t]+$/gm, "");

sojin 建议的更清洁的解决方案

e.target.value = e.target.value.trim()

【讨论】：

是的，我知道了，但是当我从记事本复制“文本”并粘贴到输入字段时，它应该像“文本”一样删除空格，但它没有反映

【解决方案2】：

替换

  const handleChangeWhiteSpace = (e) => {
    if (e.target.value.includes(" ")) {
      e.target.value = e.target.value.replace(/\s/g, "");
    }
  };

有了这个

  const handleChangeWhiteSpace = (e) => {
      e.target.value = e.clipboardData.getData('Text').trim();
  };

要在文本字段中粘贴文本时注册更改，请使用 onPaste 事件

onPaste={handleChangeWhiteSpace}

最终代码

  const handleKeyDown = (e) => {
    if (e.key === " ") {
      e.preventDefault();
    }
    
  };
  const handleChangeWhiteSpace = (e) => {
      e.target.value = e.target.value.trim();
  };

<MyInput
                          type="text" style={{width:'240px'}}
                          error={formik.errors.input && formik.touched.input}
                          value={formik.values.input}
                          onBlur={formik.handleBlur}
                          onPaste={handleChangeWhiteSpace}
                          onChange={(e)=>{formik.handleChange(e);
                          handleChangeWhiteSpace()}}
                          onKeyDown={handleKeyDown}
                          name="input"
                          id="input"
                          autoFocus={false}
                          autoComplete="off"
/>

【讨论】：

是的，我知道了，但是当我从记事本复制“文本”并粘贴到输入字段时，它应该像“文本”一样删除空格，但它没有反映
你可以为你的输入元素添加 onPaste，我已经改变了我的代码查看它。
是的，添加后会出现无法读取未定义属性（读取“修剪”）的错误
@SougataMukherjee 这可能是因为目标值为空。我认为我们需要使用 e.clipboardData.getData('Text')。我已经编辑了我的答案，让我知道它是否有效