React JS Forms: The Forms are the basic HTML elements that allow the user to interact with a web page. Here some uses of forms like search, login, and registration, Contact forms, Shopping carts checkout and lot more. With the help of reacting we can make forms on the web page as less static and more interactive.
Handling React JS Forms
Two different ways for handling forms in React,
- Uncontrolled components are if the data handled by DOM.
- Controlled components are if the data handled by Components.
Uncontrolled Components
The controlled components are used more often. In case you may want to use uncontrolled components, some fields in forms are uncontrollable of their behavior like <input type=”file”> field. If any element changes in the form which is managed by a component and it can track it by using onchange attribute.
onChange Example
class Form extends React.Component {
constructor(props) {
super(props)
this.state = { username: '' }
}
handleChange(event) {}
render() {
return (
<form>
Username:
<input
type="text"
value={this.state.username}
onChange={this.handleChange}
/>
</form>
)
}
}
handleChange Example
In case to create a new state in class components we can use handleChange method otherwise can’t be accessed inside the method.
class Form extends React.Component {
constructor(props) {
super(props)
this.state = { username: '' }
this.handleChange = this.handleChange.bind(this)
}
handleChange(event) {
this.setState({ value: event.target.value })
}
render() {
return (
<form>
<input
type="text"
value={this.state.username}
onChange={this.handleChange}
/>
</form>
)
}
}
onSubmit Example
To submit the form we can use onSubmit attribute which can be used to call handle Submit.
class Form extends React.Component {
constructor(props) {
super(props)
this.state = { username: '' }
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(event) {
this.setState({ value: event.target.value })
}
handleSubmit(event) {
alert(this.state.username)
event.preventDefault()
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input
type="text"
value={this.state.username}
onChange={this.handleChange}
/>
<input type="submit" value="Submit" />
</form>
)
}
}
Form Validation
const Form = props => {
const [username, setUsername] = useState()
const handleChangeUsername = e => {
setUsername(e.target.value)
}
const handleSubmit = event => {
alert(username)
event.preventDefault()
}
render() {
return (
<form onSubmit={handleSubmit}>
Username:
<input
type="text"
value={username}
onChange={handleChangeUsername}/>
</form>
)
}
}
Form Validation can be handled by the handleChange() method which helps to access both old value and new value. If the new value is not valid reject the updated value and provide information to the user. HTML forms are not consistent, with the help of reacting the things get more consistent and also provide to update fields with the help of value attribute.
Example of a Text Area
<textarea value={this.state.address} onChange={this.handleChange} />
For Select Tag
<select value="{this.state.age}" onChange="{this.handleChange}">
<option value="teen">Less than 18</option>
<option value="adult">18+</option>
</select>
NOTE: Before we provides the input tag as <input type=”file”> which works differently.
React.createRef() Example
Here you need to provide a reference using ref attribute to a property in the constructor with React.createRef(), which helps to get value in the submit handler.
class FileInput extends React.Component {
constructor(props) {
super(props)
this.curriculum = React.createRef()
this.handleSubmit = this.handleSubmit.bind(this)
}
handleSubmit(event) {
alert(this.curriculum.current.files[0].name)
event.preventDefault()
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input type="file" ref={this.curriculum} />
<input type="submit" value="Submit" />
</form>
)
}
}
This is the way we specify uncontrolled components, here the state is stored in DOM rather than in the component state.
Controlled Components
Controlled components are used frequently and handled by the components. For that, you refer to React JS components.