Material-ui: maxLength untuk kotak masukan teks

Hai @xuansehyun , Anda seharusnya bisa menyetel atribut maxLength pada elemen TextField seperti:

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

Beri tahu saya jika tidak berhasil.

Ini berfungsi untuk saya, Anda dapat menutup ini, saya pikir :)

@otroboe saya setuju.

bagaimana saya bisa menambahkan kesalahan validasi jika ada panjang min kurang dari minLength didefinisikan

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

Saya mencoba ini dan tidak berhasil. MaxLength berakhir pada div, bukan textarea. Inilah kode saya yang menghasilkan HTML di atas.

<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",

Pembaruan: Saya menemukan saya bisa mendapatkan ini bekerja dengan menggunakan inputProps={{maxLength: 2}} . Casing itu penting. Ini tidak bekerja pada InputProps

Tidak ada dokumentasi tentang maxLength langsung pada TextField .

Saya juga mengalami kesulitan untuk membuatnya bekerja dengan beta, dan sepertinya itu harus menjadi properti langsung di API komponen.

@JarLowrey menjawabnya di sini: https://github.com/mui-org/material-ui/issues/5309#issuecomment -355462588

Untuk referensi saya sebutkan di sini juga. Untuk membatasi jumlah panjang input 'mis. 10' di [email protected] , coba kode ini:

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

Perhatikan bahwa InputProps dan inputProps adalah dua properti TextField yang berbeda. Fakta ini menyia-nyiakan beberapa jam hidup saya.

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

Perhatikan bahwa InputProps dan inputProps adalah dua properti TextField yang berbeda. Fakta ini menyia-nyiakan beberapa jam hidup saya.

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

Dengan cara yang sama, properti panjang min juga berfungsi kan?

@kenecaswell terima kasih atas kirimannya, saya hanya menghabiskan satu jam mencoba mencari tahu apa yang saya lakukan salah.

@kenecaswell Anda baru saja menyelamatkan hidup 👍 Terima kasih bro !!

Jika ada type = 'number', maxLength tidak akan berfungsi
type = 'number'
inputProps = {{
maxLength: 10,
}}
/>
Harus:
inputProps = {{
maxLength: 10,
}}
/>

Solusi yang lebih baik tanpa atribut apa pun (jika tidak berhasil).
Dalam TextField onChange() , perbarui status Anda hanya jika panjang nilainya sama dengan <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
}
}

Solusi yang lebih baik tanpa atribut apa pun (jika tidak berhasil).
Dalam TextField onChange() , perbarui status Anda hanya jika panjang nilainya sama dengan <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 bukanlah solusi yang lebih baik karena akan tetap mengaktifkan peristiwa bahkan setelah batas tercapai, mungkin tampak tidak ada apa-apa dengan CPU modern, tetapi kita harus merancang sistem kita untuk menerapkan pembatasan pada tingkat HTML jika kita bisa. maxLength adalah atribut HTML dan kompatibel lintas browser bahkan tanpa JavaScript

inputProps={{ maxLength: 365 }} bekerja untuk saya.

Jika Anda menggunakan formik-material-ui cara yang harus dilakukan adalah:
<Field component={TextField} InputProps={{ inputProps: { maxLength: 5 }, }} />

Saya ingin menggunakan type='number' , jadi satu-satunya solusi bagi saya adalah menggunakan substring harga setState bagian.

Contoh:

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