将长度约束放入反应js中的TextField中

Question

我正在从卡号的用户那里获取输入,并希望用户输入的长度不得小于和大于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或任何事件处理程序来限制长度.

Answer 1

您可以设置maxLength属性以限制文本框中的文本.

而不是onChange方法,你可以传递maxLength给inputProps道具material-ui TextField.

<TextField
    required
    id="required"
    label="Required"
    defaultValue="Hello World"
    inputProps={{ maxLength: 12 }}
/>

Answer 2

    <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>
        ),
      }}
    />

Answer 3

      <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}}

      />

Answer 4

我在这里找到了另一个解决方案。

<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)
    }}/>

Answer 5

值得注意的是，Material-ui<TextField />组件没有maxlength属性。但是，原始 html<input>确实如此。所以你真的不需要创建任何额外的函数来让它工作。只需使用基本<input>属性即可inputProps。

实际答案是这样的：

inputProps={
    {maxLength: 22}
}
// Result => <input maxlength="yourvalue" />

它的作用是设置maxlength底层的属性，<input>结果是：<input maxlength="yourvalue" />。这里要注意的另一件重要事情是您使用inputProps而不是InputProps. 您的目标是小写字母inputProps。

Answer 6

如果您使用的是 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/。

Answer 7

我发现Material UITextField之间的行为有些奇怪Input

它们彼此非常相似，我看到的问题如下：

在 TextField 组件上，如果您使用大写的 InputProps "I"，则会显示装饰，但另一方面，如果您将其用作小写“ inputProps”，则maxLengthHtml 属性将被 TAKEN 为valid，但不会显示adorments

我最终使用INPUT而不是 aTextField所以你可以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下面的代码是一个工作示例，正如您可能会看到的，我像在 a 、输入标签和输入“ 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>

解决方案。我的最终建议是，使用 anOutlinedInput而不是 a TextField，这样您就可以以单独的方式放置Adorments，也可以maxLength

FormControl OutlinedInput下面是一个带有, 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>