繁体   English   中英

如何将输入标签限制为仅 10 个逗号?

[英]How can I limit the input tag to only 10 Commas?

您需要一个将您限制为 10 个逗号的输入自定义。

当它是10时,应该可以修改它。

目前,输入事件的工作速度更快,因此添加了额外的逗号,因此无法对其进行编辑。

我的代码

// input props
value={relationSearch}
onChange={(e) => handleOnChangeInput(e)}
onKeyPress={handleKeyPress}

//callbackfunction
const relationCallbackFunction = {
  handleOnChangeInput: (e) => {
    setRelationSearch(e.target.value);
  },
};

// input event area
const handleOnChangeInput = (e) => {
  relationCallbackFunction.handleOnChangeInput(e);
};

const handleKeyPress = (e) => {
  const currentStr = relationSearch.split(',');
  console.log(e.target.value);

  if (currentStr.length > 11) {
    e.target.value ='';
  }
};

从输入道具中删除handleKeyPress function 并更新relationCallbackFunction object。

 const relationCallbackFunction = {
  handleOnChangeInput: (e) => {
    let value = e.target.value;
    const currentStr = value.split(",");
    if (currentStr.length <= 10) {
      setRelationSearch(value);
    }
  }
};

你可以通过几种方式做到这一点,但这里有一个简单的解决方案。 这里的重要部分是确保您将输入设置为受控输入,您可以在其中提供来自 react 的值。

我们需要一个 function 来实现您的逻辑。 它应该接受一个字符串和您想要的逗号总数,并将该字符串限制为逗号数量。

下面是一个非常简单的 function 可以做到这一点。 它使用逗号分割字符串,确保结果数组的长度为 10,并从结果数组中返回一个连接字符串。

function ensureCommas(str, commas = 10) {
 const commaArray = str.split(',');

 const reduced = commaArray.slice(0, commas);
 
 return reduced.join(',');

}

现在使用它。 这是一个非常简单的 App 组件,它将输入值保存在 state 中,并将此 state 值提供给输入,并且有一个 onChange 事件处理程序,它在每次按键时调用上述 ZC1C425268E68385D1AB5074C17A94F14

import { useState } from "react";
import "./styles.css";

function ensureCommas(str, commas = 10) {
  const commaArray = str.split(",");

  return commaArray.slice(0, 10);
}

    export default function App() {
      const [value, setValue] = useState("");
    
      const onInputChange = (e) => {
        const inputVal = e.target.value;
    
        const newInputVal= ensurecommas(inputVal , 10);
    
        setValue(newInputVal);
      };
    
      return (
        <div className="App">
          <input value={value} onChange={onInputChange}></input>
        </div>
      );
    }

代码沙盒

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM