Material-ui: ν…μŠ€νŠΈ μž…λ ₯ μƒμžμ˜ maxLength

에 λ§Œλ“  2015λ…„ 09μ›” 02일  Β·  17μ½”λ©˜νŠΈ  Β·  좜처: mui-org/material-ui

μ•ˆλ…•ν•˜μ„Έμš” μ‚¬μš©μžκ°€ μΌμ •λŸ‰μ˜ 문자λ₯Ό μž…λ ₯ν•˜λ©΄ 더 이상 μž…λ ₯ ν•  수 없도둝 ν…μŠ€νŠΈ μž…λ ₯의 μ΅œλŒ€ 길이λ₯Ό μ„€μ •ν•˜λŠ” 속성이 μžˆλŠ”μ§€ κΆκΈˆν•©λ‹ˆλ‹€.
κ°μ‚¬ν•©λ‹ˆλ‹€!

TextField question

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

InputProps 및 inputProps λŠ” TextField의 두 가지 λ‹€λ₯Έ μ†μ„±μž…λ‹ˆλ‹€. 이 사싀은 λ‚΄ μΈμƒμ˜ λͺ‡ μ‹œκ°„μ„ λ‚­λΉ„ν–ˆμŠ΅λ‹ˆλ‹€.

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

λͺ¨λ“  17 λŒ“κΈ€

μ•ˆλ…•ν•˜μ„Έμš” @xuansehyun , TextField μš”μ†Œμ— maxLength 속성을 λ‹€μŒκ³Ό 같이 μ„€μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

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

λ‚˜λŠ” 이것을 μ‹œλ„ν–ˆμ§€λ§Œ μž‘λ™ν•˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€. 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 μ—μ„œλŠ” μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

TextField 에 직접 maxLength에 λŒ€ν•œ λ¬Έμ„œκ°€ μ—†μŠ΅λ‹ˆλ‹€.

λ˜ν•œ λ² νƒ€μ—μ„œμ΄ μž‘μ—…μ„ μˆ˜ν–‰ν•˜λŠ” 데 λ¬Έμ œκ°€ 있으며 ꡬ성 μš”μ†Œ APIμ—μ„œ 직접 μ†μ„±μ΄μ–΄μ•Όν•˜λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€.

@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 = 'number'κ°€ 있으면 maxLengthκ°€ μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.
μœ ν˜• = '숫자'
inputProps = {{
maxLength : 10,
}}
/>
κ·Έκ²ƒμ€ν•΄μ•Όν•œλ‹€:
inputProps = {{
maxLength : 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λŠ” ν•œκ³„μ— 도달 ν•œ 후에도 이벀트λ₯Ό λ°œμƒμ‹œν‚¬ 것이기 λ•Œλ¬Έμ— κ²°μ½” 더 λ‚˜μ€ μ†”λ£¨μ…˜μ΄ μ•„λ‹™λ‹ˆλ‹€. μ΅œμ‹  CPUμ—μ„œλŠ” 아무것도 μ•„λ‹Œ κ²ƒμ²˜λŸΌ 보일 수 μžˆμ§€λ§Œ κ°€λŠ₯ν•˜λ©΄ 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>
          )
        }}
      />
이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰

κ΄€λ ¨ 문제

chris-hinds picture chris-hinds  Β·  3μ½”λ©˜νŠΈ

rbozan picture rbozan  Β·  3μ½”λ©˜νŠΈ

FranBran picture FranBran  Β·  3μ½”λ©˜νŠΈ

ericraffin picture ericraffin  Β·  3μ½”λ©˜νŠΈ

ryanflorence picture ryanflorence  Β·  3μ½”λ©˜νŠΈ