Constructor
# <Input id label type value onChange onFocus onBlur addErrorElement maxLength required requiredFeedbackEnabled requiredFeedback readOnly error wrapperClassName labelClassName inputClassName activeClassName invalidClassName errorClassName requiredFeedbackClassName />
Function to add an input element with label and error message (can be disable).
PropTypes:
| Name | Type | Required | Description | Default |
|---|---|---|---|---|
id |
string | Yes | The id of input. | |
label |
string | No | The label of input. | |
type |
string | No | The type of input. | "text" |
value |
node | No | The value of input. | |
onChange |
func | No | The callback function when input value is changed. | |
onFocus |
func | No | The callback function when input is focused. | |
onBlur |
func | No | The callback function when input is blurred. | |
addErrorElement |
bool | No | Whether to add an error element. | true |
maxLength |
number | No | The max length of input. | 128 |
required |
bool | No | Whether the input is required. | false |
requiredFeedbackEnabled |
bool | No | Whether to add the required feedback. | false |
requiredFeedback |
string | No | The feedback to show if the input is required. | "*" |
readOnly |
bool | No | Whether the input is read only. | false |
error |
string | No | The error message of input. | |
wrapperClassName |
string | No | The class name of wrapper. | "form-group" |
labelClassName |
string | No | The class name of label. | "form-label" |
inputClassName |
string | No | The class name of input. | "form-input" |
activeClassName |
string | No | The class name of input when it is active. | "active" |
invalidClassName |
string | No | The class name of input when it is invalid. | "invalid" |
errorClassName |
string | No | The class name of input when it is error. | "error" |
requiredFeedbackClassName |
string | No | The class name of feedback when the input is required. | "required" |
- The Input component.
React.Component
Methods
# inner handleBlur()
If the onBlur prop is defined, call it with the event and the id. Then set the isFocused state to false
# inner handleChange()
If the onChange prop is defined, call it with the event.
# inner handleFocus()
If the onFocus prop is defined, call it with the event. Then set the isFocused state to true
# inner handleLabelClick()
On click on label, set the isFocused state to true