Material-ui: maxLength لمربع إدخال النص

مرحبًا xuansehyun ، يجب أن تكون قادرًا فقط على تعيين السمة maxLength على عنصر TextField الخاص بك كما يلي:

<TextField
    style={styles.textfield}
    hintText="Hint Text (MultiLine)"
    multiLine={true} 
    maxLength="2" />

اسمحوا لي أن أعرف إذا لم ينجح ذلك.

إنه يعمل بالنسبة لي ، يمكنك إغلاق هذا على ما أعتقد :)

otroboe أوافق.

كيف يمكنني إضافة خطأ التحقق من الصحة إذا كان هناك حد أدنى للطول أقل من الحد الأدنى المحدد

<div class="MuiFormControl-root-100" maxlength="2" style="display: block;">
  <div class="MuiInput-root-104 SendAnnouncementFormComponent-textFieldTextRoot-90 MuiInput-formControl-105 MuiInput-multiline-111">
    <textarea class="MuiInput-input-113 SendAnnouncementFormComponent-textFieldTextInput-92 MuiInput-inputMultiline-117" id="announcementText" name="text" placeholder="Update Text" type="text" rows="10" aria-required="false" aria-invalid="false"></textarea>
  </div>
</div>

لقد جربت هذا ولم ينجح. انتهى maxLength في div ، وليس منطقة النص. هذا هو الكود الخاص بي الذي أنشأ HTML أعلاه.

<TextField
              InputProps={{
                id: 'announcementText',
                disableUnderline: true,
                multiline: true,
                rows: 10,
                classes: {
                  root: textFieldTextRoot,
                  input: textFieldTextInput,
                },
              }}
              maxLength="2"
              name="text"
              type="text"
              value={this.state.text}
              onChange={this.handleInputChange}
              placeholder="Update Text"
              style={{ display: 'block' }}
            />

"material-ui": "1.0.0-beta.30",

تحديث: اكتشفت أنه يمكنني تشغيل هذا باستخدام inputProps={{maxLength: 2}} . الغلاف مهم. لا يعمل على InputProps

لا توجد وثائق حول maxLength مباشرة على TextField .

أواجه أيضًا مشكلة في جعل هذا يعمل مع الإصدارات التجريبية ، ويبدو بالتأكيد أنه يجب أن يكون خاصية مباشرة على مكون API.

JarLowrey أجاب عنها هنا: https://github.com/mui-org/material-ui/issues/5309#issuecomment -355462588

للإشارة أذكرها هنا أيضًا. لتحديد عدد طول الإدخال "على سبيل المثال 10" في [email protected] ، جرب هذا الرمز:

<TextField
  inputProps={{
    maxLength: 10,
  }}
/>

لاحظ أن InputProps و inputProps هما خاصيتان مختلفتان لـ TextField. هذه الحقيقة ضيعت بضع ساعات من حياتي.

<TextField
  InputProps={{ 
    disableUnderline: true
  }}
  inputProps={{
    maxLength: 10
  }}
/>

لاحظ أن InputProps و inputProps هما خاصيتان مختلفتان لـ TextField. هذه الحقيقة ضيعت بضع ساعات من حياتي.

<TextField
  InputProps={{ 
    disableUnderline: true
  }}
  inputProps={{
    maxLength: 10
  }}
/>

بنفس الطريقة تعمل خاصية min length أيضًا ، أليس كذلك؟

kenecaswell شكرًا على

kenecaswell لقد أنقذت للتو حياة 👍 شكرًا يا أخي !!

إذا كان هناك type = 'number' ، فلن يعمل maxLength
اكتب = 'رقم'
المدخلات = {{
الطول الأقصى: 10 ،
}}
/>
يجب أن يكون:
المدخلات = {{
الطول الأقصى: 10 ،
}}
/>

حل أفضل بدون أي خاصية (في حالة عدم نجاحها).
في TextField 's onChange() ، قم بتحديث حالتك فقط إذا كان طول القيمة يساوي <YOUR_MAX_LENGTH> .

onChange = (event) => {
// Check if the textfield's that
// you're getting has a name attribute which has a value of <YOUR_UNIQUE_IDENTIFIER>

if (event.target.name === <YOUR_UNIQUE_IDENTIFIER>
&& event.target.value !== <YOUR_MAX_LENGTH>) {
// Update your state here
}
}

حل أفضل بدون أي خاصية (في حالة عدم نجاحها).
في TextField 's onChange() ، قم بتحديث حالتك فقط إذا كان طول القيمة يساوي <YOUR_MAX_LENGTH> .

onChange = (event) => {
// Check if the textfield's that
// you're getting has a name attribute which has a value of <YOUR_UNIQUE_IDENTIFIER>

if (event.target.name === <YOUR_UNIQUE_IDENTIFIER>
&& event.target.value !== <YOUR_MAX_LENGTH>) {
// Update your state here
}
}

لا يعد OnChange حلاً أفضل من أي وقت مضى لأنه سيستمر في تشغيل الحدث حتى بعد الوصول إلى الحد الأقصى ، وقد يبدو أنه لا شيء مع وحدة المعالجة المركزية الحديثة ولكن يجب علينا تصميم أنظمتنا لفرض قيود على مستوى HTML إذا استطعنا. maxLength هي سمة HTML ومتوافقة مع المتصفحات حتى بدون JavaScript

inputProps={{ maxLength: 365 }} يعمل لدي.

في حال كنت تستخدم formik-material-ui فإن الطريق الذي يجب أن تسلكه سيكون:
<Field component={TextField} InputProps={{ inputProps: { maxLength: 5 }, }} />

أريد استخدام type='number' ، لذا فإن الحل الوحيد بالنسبة لي هو استخدام جزء substring في setState .

مثال:

  const [deposit, setDeposit] = React.useState<number | null>(null);
  const disabled = deposit == null || deposit < 0 || deposit === 0;

  return (
      <TextField
        variant='outlined'
        color='primary'
        fullWidth
        type='number'
        value={deposit}
        onChange={(e) => setDeposit(Number(e.target.value.substring(0, 6)))} // This line to limit the length!
        label='Deposit'
        InputProps={{
          endAdornment: (
            <InputAdornment position='end'>
              <Button
                variant='text'
                disabled={disabled}
                color={'primary'}
                onClick={(_) => onSend(deposit!)}>
                <Typography color='primary'>{'Submit'}</Typography>
              </Button>
            </InputAdornment>
          )
        }}
      />