Material-ui: рдЯреЗрдХреНрд╕реНрдЯ-рдЗрдирдкреБрдЯ рдмреЙрдХреНрд╕ рдХреЗ рд▓рд┐рдП рдЕрдзрд┐рдХрддрдо рдЧрддрд┐

рдХреЛ рдирд┐рд░реНрдорд┐рдд 2 рд╕рд┐рддре░ 2015  ┬╖  17рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: mui-org/material-ui

рдирдорд╕реНрддреЗ рдореИрдВ рд╕реЛрдЪ рд░рд╣рд╛ рдерд╛ рдХрд┐ рдХреНрдпрд╛ рдкрд╛рда-рдЗрдирдкреБрдЯ рдХреА рдЕрдзрд┐рдХрддрдо рд▓рдВрдмрд╛рдИ рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рд╕рдВрдкрддреНрддрд┐ рд╣реИ рддрд╛рдХрд┐ рдЬрдм рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдПрдХ рдирд┐рд╢реНрдЪрд┐рдд рдорд╛рддреНрд░рд╛ рдореЗрдВ рдЕрдХреНрд╖рд░реЛрдВ рдореЗрдВ рдкреНрд░рд╡реЗрд╢ рдХрд░реЗ рддреЛ рд╡реЗ рдХрд┐рд╕реА рднреА рдЕрдзрд┐рдХ рдореЗрдВ рдкреНрд░рд╡реЗрд╢ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рдирд╣реАрдВ рд╣реЛрдВрдЧреЗ?
рдЖрдкрдХрд╛ рдмрд╣реБрдд рдмрд╣реБрдд рдзрдиреНрдпрд╡рд╛рдж!

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ InputProps рдФрд░ inputProps TextField рдХреЗ рджреЛ рдЕрд▓рдЧ-рдЕрд▓рдЧ рдЧреБрдг рд╣реИрдВред рдЗрд╕ рддрдереНрдп рдиреЗ рдореЗрд░реЗ рдЬреАрд╡рди рдХреЗ рдХреБрдЫ рдШрдВрдЯреЗ рдмрд░реНрдмрд╛рдж рдХрд░ рджрд┐рдПред

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

рд╕рднреА 17 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдЕрд░реЗ @xuansehyun , рдЖрдкрдХреЛ рд╕рд┐рд░реНрдл рдЗрддрдирд╛ рдкрд╕рдВрдж рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП рдХрд┐ maxLength рдЖрдкрдХреЗ TextField рддрддреНрд╡ рдкрд░ рдЙрдкрд▓рдмреНрдз рд╣реЛ:

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

рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдЕрдЧрд░ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред

рдпрд╣ рдореЗрд░реЗ рд▓рд┐рдП рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рдЖрдк рдЗрд╕реЗ рдореЗрд░реЗ рд╡рд┐рдЪрд╛рд░ рд╕реЗ рдмрдВрдж рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ :)

@otroboe рдореИрдВ рд╕рд╣рдордд рд╣реВрдБред

рдореИрдВ рдХреИрд╕реЗ рд╕рддреНрдпрд╛рдкрди рддреНрд░реБрдЯрд┐ рдЬреЛрдбрд╝ рд╕рдХрддрд╛ рд╣реВрдБ рдпрджрд┐ рдиреНрдпреВрдирддрдо рд▓рдВрдмрд╛рдИ рдХрдо рд╣реИ рддреЛ рдкрд░рд┐рднрд╛рд╖рд┐рдд minLength рд╣реИ

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

рдореИрдВрдиреЗ рдпрд╣ рдХреЛрд╢рд┐рд╢ рдХреА рдФрд░ рдпрд╣ рдХрд╛рдо рдирд╣реАрдВ рдХрд┐рдпрд╛ред рдореИрдХреНрд╕рд┐рдордо рдбрд╛рдпрд╡реЛрд░реНрд╕ рдкрд░ рд╕рдорд╛рдкреНрдд рд╣реЛрддрд╛ рд╣реИ, рди рдХрд┐ рдЯреЗрдХреНрд╕рд╛рд░рд┐рдпрд╛ рдкрд░ред рдпрд╣рд╛рдБ рдореЗрд░рд╛ рдХреЛрдб рд╣реИ рдЬреЛ рдЙрдкрд░реЛрдХреНрдд 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 рдкрд░ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ

TextField рдкрд░ рд╕реАрдзреЗ maxLength рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдХреЛрдИ рджрд╕реНрддрд╛рд╡реЗрдЬ рдирд╣реАрдВ рд╣реИред

рдореБрдЭреЗ рдмреАрдЯрд╕ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдореЗрдВ рднреА рдкрд░реЗрд╢рд╛рдиреА рд╣реЛ рд░рд╣реА рд╣реИ, рдФрд░ рдпрд╣ рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ рд╕реАрдзреЗ рдШрдЯрдХ рдПрдкреАрдЖрдИ рдкрд░ рдПрдХ рд╕рдВрдкрддреНрддрд┐ рд╣реЛрдиреА рдЪрд╛рд╣рд┐рдПред

@JarLowrey рдиреЗ рдпрд╣рд╛рдВ рдЗрд╕рдХрд╛ рдЬрд╡рд╛рдм рджрд┐рдпрд╛: https://github.com/mui-org/material-ui/issues/5309#issuecomment -355462588

рд╕рдВрджрд░реНрдн рдХреЗ рд▓рд┐рдП рдореИрдВ рдпрд╣рд╛рдВ рднреА рдЗрд╕рдХрд╛ рдЙрд▓реНрд▓реЗрдЦ рдХрд░рддрд╛ рд╣реВрдВред [email protected] рдореЗрдВ рдЗрдирдкреБрдЯ рд▓рдВрдмрд╛рдИ 'рдЙрджрд╛ 10' рдХреА рд╕рдВрдЦреНрдпрд╛ рдХреЛ рд╕реАрдорд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рдЗрд╕ рдХреЛрдб рдХреЛ рдЖрдЬрд╝рдорд╛рдПрдВ:

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

рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ InputProps рдФрд░ inputProps TextField рдХреЗ рджреЛ рдЕрд▓рдЧ-рдЕрд▓рдЧ рдЧреБрдг рд╣реИрдВред рдЗрд╕ рддрдереНрдп рдиреЗ рдореЗрд░реЗ рдЬреАрд╡рди рдХреЗ рдХреБрдЫ рдШрдВрдЯреЗ рдмрд░реНрдмрд╛рдж рдХрд░ рджрд┐рдПред

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

рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐ InputProps рдФрд░ inputProps TextField рдХреЗ рджреЛ рдЕрд▓рдЧ-рдЕрд▓рдЧ рдЧреБрдг рд╣реИрдВред рдЗрд╕ рддрдереНрдп рдиреЗ рдореЗрд░реЗ рдЬреАрд╡рди рдХреЗ рдХреБрдЫ рдШрдВрдЯреЗ рдмрд░реНрдмрд╛рдж рдХрд░ рджрд┐рдПред

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

рдЙрд╕реА рддрд░рд╣ рдиреНрдпреВрдирддрдо рд▓рдВрдмрд╛рдИ рд╕рдВрдкрддреНрддрд┐ рднреА рд╕рд╣реА рдХрд╛рдо рдХрд░рддреА рд╣реИ?

@kenecaswell рдкрджреЛрдВ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж, рдореИрдВ рд╕рд┐рд░реНрдл рдПрдХ рдШрдВрдЯреЗ рдмрд┐рддрд╛рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░ рд░рд╣рд╛ рдерд╛ рдХрд┐ рдореИрдВ рдХреНрдпрд╛ рдЧрд▓рдд рдХрд░ рд░рд╣рд╛ рдерд╛ред

@kenecaswell рдЖрдкрдиреЗ рдмрд╕ рдПрдХ рдЬреАрд╡рди рдмрдЪрд╛рдпрд╛

рдпрджрд┐ рдкреНрд░рдХрд╛рд░ = 'рд╕рдВрдЦреНрдпрд╛' рд╣реИ, рддреЛ рдЕрдзрд┐рдХрддрдо рдЧрддрд┐ рдХрд╛рдо рдирд╣реАрдВ рдХрд░реЗрдЧреА
type = 'рд╕рдВрдЦреНрдпрд╛'
inputProps = {{
рдЕрдзрд┐рдХрддрдо рдЧрддрд┐: 10,
}}
/>
рдпрд╣ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП:
inputProps = {{
рдЕрдзрд┐рдХрддрдо рдЧрддрд┐: 10,
}}
/>

рдмрд┐рдирд╛ рдХрд┐рд╕реА рд╡рд┐рд╢реЗрд╖рддрд╛ рдХреЗ рдПрдХ рдмреЗрд╣рддрд░ рд╕рдорд╛рдзрд╛рди (рдпрджрд┐ рд╡реЗ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВ)ред
рдЖрдкрдХреЗ TextField 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 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 рд╕реНрддрд░ рдкрд░ рдкреНрд░рддрд┐рдмрдВрдз рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдбрд┐рдЬрд╝рд╛рдЗрди рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП рдЕрдЧрд░ рд╣рдо рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдЕрдзрд┐рдХрддрдо рдЧрддрд┐ HTML рд╡рд┐рд╢реЗрд╖рддрд╛ рд╣реИ рдФрд░ рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рдХреЗ рдмрд┐рдирд╛ рднреА рд╕рдВрдЧрдд рдХреНрд░реЙрд╕ рдмреНрд░рд╛рдЙрдЬрд╝рд░

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>
          )
        }}
      />
рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕