Javascript 如何禁用在字符串输入字段中键入数字的可能性

发布于09月18日

我有来自PrimeReact的InputText的输入字段，该字段的内容应该始终是文本，而不是数字.我想禁用输入数字的可能性. 下面是代码示例. 我还try 在type of data为‘number’时进行验证，然后显示注释，但我看到的输入数据始终是字符串

 <FloatingLabel text="Name" name={`luxmeds.${index}.persons.${idx}.name`}>
                          <StyledInputText
                            name={`luxmeds.${index}.persons.${idx}.name`}
                            value={person.name}
                            onChange={handleChange}
                            type="text"
                          />
                        </FloatingLabel>
                        {!values.luxmeds[index].persons[idx].name && (
                          <StyledWarningText>{'You need to provide a name'}</StyledWarningText>
                        )}
                        {typeof values.luxmeds[index].persons[idx].name === 'number' && (
                          <StyledWarningText>{'You need to provide a name'}</StyledWarningText>
                        )}

你能建议一下如何做到这一点吗？

问好

推荐答案

您可以只检测传递给onChange的值是否包含数字，如果包含，则不要设置person.name的状态.

例如,

 const handleChange = (e) => {
      const numberRegex = /[0-9]/;
      if (!numberRegex.test(e.target.value)) {
        // set state
      }
   }

您还可以考虑使用HTML5模式属性:

                          <StyledInputText
                            name={`luxmeds.${index}.persons.${idx}.name`}
                            value={person.name}
                            onChange={handleChange}
                            type="text"
                            pattern="[a-zA-Z]*"
                          />