在反应js中的TextField中放置长度约束
Posted
技术标签:
【中文标题】在反应js中的TextField中放置长度约束【英文标题】：Put length constraint in a TextField in react js 【发布时间】：2018-02-06 22:59:04 【问题描述】：我正在从卡号的用户那里输入，并希望用户输入的长度不能小于和大于 12。这是我的文本字段的声明。
<TextField
id="SigninTextfield"
label="Aadhaar number"
id="Aadhar"
lineDirection="center"
required=true
type="number"
maxLength=12
style=styles.rootstyle
erorText="Please enter only 12 digits number"
/>
现在我不明白是否使用 javascript 或任何事件处理程序来限制长度。
【问题讨论】：
你在哪里使用 TextField 组件 @ShubhamKhatri 来自 react-md/lib 我看不到任何 maxLength 属性material-ui.com/#/components/text-field 我试图实现 maxLength 并忘记从代码中删除它。 @亚历克西斯 maxLength 属性作为道具存在，但不限制文本的长度，而是在文本超过长度时显示警告，并在侧面显示计数。 react-md.mlaursen.com/components/text-fields?tab=1 【参考方案1】：您可以设置maxLength属性来限制文本框中的文本。
您可以将 maxLength 传递给 material-ui TextField 的 inputProps 属性，而不是 onChange 方法。
<TextField
required
id="required"
label="Required"
defaultValue="Hello World"
inputProps= maxLength: 12
/>
基本上我们可以通过inputProps对象编辑所有输入元素的原生属性。
链接到TextFieldApi
【讨论】：
这不是功能，只有inputStyle 这是最简单的解决方案。谢谢！ 仍然是最好的解决方案 警告：注意“inputProps”中的小写i，这与带有大写I的“InputProps”完全不同。我学得很辛苦。
为什么单独使用 maxLength 不起作用？我看过很多 maxLength 的答案，但只有这样才能解决问题？【参考方案2】：
我找到了另一个解决方案here。
<TextField
required
id="required"
label="Required"
defaultValue="Hello World"
onInput = (e) =>
e.target.value = Math.max(0, parseInt(e.target.value) ).toString().slice(0,12)
/>
【讨论】：
当然，正确的方式是使用inputProps，但如果input type 是number，那么您的方式就是正确的方式。
onInput = (e) => var InputElement = (e.target as htmlInputElement); InputElement.value = Math.max(0, parseInt(InputElement.value) ).toString().slice(0,12); 在我的环境中 .value 无法识别，因此使用了 HTMLInputElement。【参考方案3】：
<TextField
autoFocus=true
name="name"
onChange=handleChange
placeholder="placeholder"
id="filled-basic"
variant="filled"
size="small"
fullWidth
inputProps=
maxLength: 25,
InputProps=
startAdornment: (
<InputAdornment position="start">
<SearchIcon />
</InputAdornment>
),
/>
【讨论】：
【参考方案4】： <TextField
id="username"
name="username"
label=translate('username')
onChange=handleChange
onBlur=handleBlur
value=values.username
error=Boolean(errors.username) && touched.username
helperText=(errors.username && touched.username && translate(errors.username))
required
inputProps=maxLength :20
/>
【讨论】：
【参考方案5】：值得注意的是，Material-ui <TextField /> 组件没有maxlength 属性。但是，原始 html <input> 可以。所以你真的不需要创建任何额外的函数来让它工作。只需使用inputProps 的基本<input> 属性即可。
实际答案是这样的：
inputProps=
maxLength: 22
// Result => <input maxlength="yourvalue" />
它的作用是设置底层<input> 的maxlength 属性，结果为：<input maxlength="yourvalue" />。这里要注意的另一件重要事情是您使用inputProps 而不是InputProps。您的目标是小写字母inputProps。
【讨论】：
【参考方案6】：我在 Material UI 中发现 TextField 和 Input 之间的行为有些奇怪
它们彼此非常相似，我看到的问题如下：
在 TextField 组件上，如果您使用大写 "I" 的 InputProps，则会显示 Adorments，但另一方面，如果您将其用作小写“inputProps”，则 maxLength Html 属性将被视为 @ 987654326@，但不是adorments
我最终使用了INPUT 而不是TextField，所以你可以在
adorments
<TextField
variant="outlined"
required
fullWidth
error=errors.email
id="email"
label=t("signup-page.label-email")
name="email"
onChange=handleChange
inputProps=
endAdornment: (
<InputAdornment position="end">
<IconButton aria-label="toggle password visibility">
<EmailIcon />
</IconButton>
</InputAdornment>
),
maxLength: 120,
/>
在上面的代码中，adorment 被忽略，但maxLength 被用作“inputProps”驼峰式
下面的代码是一个工作示例，如您所见，我在 Form Control、输入标签和输入“outlinedInput”中采用了旧样式。
<FormControl variant="outlined" fullWidth>
<InputLabel htmlFor="firstName">Password</InputLabel>
<OutlinedInput
value=values.firstName
autoComplete="outlined"
name="firstName"
variant="outlined"
required
fullWidth
error=errors.firstName
id="firstName"
label=t("signup-page.label-firstname")
onChange=handleChange
autoFocus
inputProps= maxLength: 32
/>
</FormControl>
解决方案。我的最终建议是，使用 OutlinedInput 而不是 TextField，这样您就可以分开输入 Adorments 和 maxLength
下面是一个带有FormControlOutlinedInput、inputProps - maxLength 和结束Adorment 图标的工作示例
<FormControl variant="outlined" fullWidth>
<InputLabel htmlFor="password">Password</InputLabel>
<OutlinedInput
value=values.passwordConfirm
variant="outlined"
required
fullWidth
error=errors.passwordConfirm
name="passwordConfirm"
label=t("signup-page.label-password-confirm")
type=values.showPasswordConfirm ? "text" : "password"
id="password-confirm"
onChange=handleChange
inputProps= maxLength:32
endAdornment=
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick=handleClickShowPassword("passwordConfirm")
onMouseDown=handleMouseDownPassword
>
values.showPasswordConfirm ? (
<Visibility />
) : (
<VisibilityOff />
)
</IconButton>
</InputAdornment>
/>
errors.passwordConfirm && (
<p className="error"> errors.passwordConfirm </p>
)
</FormControl>
【讨论】：
你说得对，InputProps 将 props 添加到其父容器 div。【参考方案7】：
对于大数字（大于 16 位），接受的答案在 Firefox 中不起作用。数字只是以一种奇怪的方式表现。
对于一个 22 长度的字段，我们最终使用了这个：
<TextField
required
validateOnBlur
field="cbu"
label="22 dígitos del CBU"
validate=validate.required
type="text"
inputProps=
maxLength: 22
onInput=(e) => e.target.value = e.target.value.replace(/[^0-9]/g, '')
/>
基本上，文本字段的原生maxLength 约束，以及“即时”从字符串到数字的转换。
改进
此外，您可能更喜欢使其可重用且更具语义化。
# constraints.js
const onlyNumbers = (e) => e.target.value = e.target.value.replace(/[^0-9]/g, '') ;
# form.js
<TextField
field="cbu"
label="22 dígitos del CBU"
inputProps=
maxLength: 22
onInput=(e) => onlyNumbers(e)
【讨论】：
【参考方案8】：material-design <TextField /> 组件没有任何 length 属性。
您可以在 onChange() 方法中创建自己的。
updateTextField(event,value)
if(value.length <= 12)
//Update your state
else
//Value length is biggest than 12
<TextField
id="SigninTextfield"
label="Aadhaar number"
id="Aadhar"
lineDirection="center"
required=true
type="number"
onChange=(e,v) => this.updateTextField(e,v)
style=styles.rootstyle
erorText="Please enter only 12 digits number"
/>
【讨论】：
【参考方案9】：在您的更改处理程序中，只需编写。
if (event.target.value.length !== maxLength ) return false;
【讨论】：
【参考方案10】：如果您使用的是 MUI 5，版本 5.0.6，由于支持旧版，您将不得不这样做，
<TextField
id="standard-textarea"
label="A label"
placeholder="Some text here"
multiline
variant="standard"
defaultValue="Hello"
inputProps=
maxLength: 255,
InputProps=
disableUnderline: true,
/>
TextField 支持inputProps 和InputProps，但有些属性反之则不起作用。
maxLength 在InputProps 中无法按预期工作，而用于 MUI 5 的 disableUnderline 之类的属性在 inputProps 中无法按预期工作。
小心typo 和i。
有关更多信息，请参阅 API，https://mui.com/api/text-field/。
【讨论】：
以上是关于在反应js中的TextField中放置长度约束的主要内容，如果未能解决你的问题，请参考以下文章
为啥在 UIScrollView 中放置视图时需要 6 个约束？
如何以编程方式在 UIPageViewController 中放置自动布局约束？