μλ
νμΈμ μ¬μ©μκ° μΌμ λμ λ¬Έμλ₯Ό μ
λ ₯νλ©΄ λ μ΄μ μ
λ ₯ ν μ μλλ‘ ν
μ€νΈ μ
λ ₯μ μ΅λ κΈΈμ΄λ₯Ό μ€μ νλ μμ±μ΄ μλμ§ κΆκΈν©λλ€.
κ°μ¬ν©λλ€!
μλ
νμΈμ @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,
}}
/>
κ·Έκ²μν΄μΌνλ€:
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>
)
}}
/>
κ°μ₯ μ μ©ν λκΈ
InputProps
λ°inputProps
λ TextFieldμ λ κ°μ§ λ€λ₯Έ μμ±μ λλ€. μ΄ μ¬μ€μ λ΄ μΈμμ λͺ μκ°μ λλΉνμ΅λλ€.