рдирдорд╕реНрддреЗ рдореИрдВ рд╕реЛрдЪ рд░рд╣рд╛ рдерд╛ рдХрд┐ рдХреНрдпрд╛ рдкрд╛рда-рдЗрдирдкреБрдЯ рдХреА рдЕрдзрд┐рдХрддрдо рд▓рдВрдмрд╛рдИ рдирд┐рд░реНрдзрд╛рд░рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рд╕рдВрдкрддреНрддрд┐ рд╣реИ рддрд╛рдХрд┐ рдЬрдм рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рдПрдХ рдирд┐рд╢реНрдЪрд┐рдд рдорд╛рддреНрд░рд╛ рдореЗрдВ рдЕрдХреНрд╖рд░реЛрдВ рдореЗрдВ рдкреНрд░рд╡реЗрд╢ рдХрд░реЗ рддреЛ рд╡реЗ рдХрд┐рд╕реА рднреА рдЕрдзрд┐рдХ рдореЗрдВ рдкреНрд░рд╡реЗрд╢ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рдирд╣реАрдВ рд╣реЛрдВрдЧреЗ?
рдЖрдкрдХрд╛ рдмрд╣реБрдд рдмрд╣реБрдд рдзрдиреНрдпрд╡рд╛рдж!
рдЕрд░реЗ @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 рдЖрдкрдиреЗ рдмрд╕ рдПрдХ рдЬреАрд╡рди рдмрдЪрд╛рдпрд╛
рдпрджрд┐ рдкреНрд░рдХрд╛рд░ = 'рд╕рдВрдЦреНрдпрд╛' рд╣реИ, рддреЛ рдЕрдзрд┐рдХрддрдо рдЧрддрд┐ рдХрд╛рдо рдирд╣реАрдВ рдХрд░реЗрдЧреА
inputProps = {{
рдЕрдзрд┐рдХрддрдо рдЧрддрд┐: 10,
}}
/>
рдпрд╣ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдП:
рдЕрдзрд┐рдХрддрдо рдЧрддрд┐: 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>
)
}}
/>
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдзреНрдпрд╛рди рджреЗрдВ рдХрд┐
InputProps
рдФрд░inputProps
TextField рдХреЗ рджреЛ рдЕрд▓рдЧ-рдЕрд▓рдЧ рдЧреБрдг рд╣реИрдВред рдЗрд╕ рддрдереНрдп рдиреЗ рдореЗрд░реЗ рдЬреАрд╡рди рдХреЗ рдХреБрдЫ рдШрдВрдЯреЗ рдмрд░реНрдмрд╛рдж рдХрд░ рджрд┐рдПред