I am new in developing application in react js and i am very confused which one is the best way / best practice for working with forms, and validating forms in react js other than controlled / uncontrolled method. Any guidance will be very helpful for me, Thank in advance.
2 Answers
Your form validation and handling form values becomes much easier if you use redux-form.
Comments
This is a sample react registration form,you ll be able to get an idea
Home.jsx
'use strict';
import React, {Component} from 'react';
import AddBook from './AddBook';
import axios from 'axios';
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
books:[],
authors:[]
};
this.addBook = this.addBook.bind(this);
}
componentWillMount(){
axios.get(`http://localhost:8095/authors`)
.then(res=>{
const authors=res.data;
this.setState({authors});
console.log(res);
})
}
addBook(Name,ISBN,Author,Price,Year,Publisher){
axios.post(`http://localhost:8095/books`,{
Name:Name,
ISBN:ISBN,
Author:Author,
Price:Price,
Year:Year,
Publisher:Publisher
}).then(res=>{
console.log(res);
})
}
render() {
return <div>
<AddBook
addBook={this.addBook}
authors={this.state.authors}
/>
</div>
}
}
AddBook.jsx
'use strict';
import React, {Component} from 'react';
import { Button } from 'react-bootstrap';
export default class AddBook extends Component {
constructor(props) {
super(props);
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(event){
event.preventDefault();
this.props.addBook(
this.nameInput.value,
this.ISBNInput.value,
this.AuthorInput.value,
this.PriceInput.value,
this.YearInput.value,
this.PublisherInput.value
);
this.nameInput.value='';
this.ISBNInput.value='';
this.AuthorInput.value='';
this.PriceInput.value='';
this.YearInput.value='';
this.PublisherInput.value='';
}
render() {
return <div>
<form>
<header>Add Books</header>
<div><input placeholder="Name" ref={nameInput=>this.nameInput=nameInput}/></div>
<div><input placeholder="ISBN" ref={ISBNInput=>this.ISBNInput=ISBNInput}/></div>
<div><select ref={AuthorInput=>this.AuthorInput=AuthorInput}>
<option selected disabled >--author name--</option>
{
this.props.authors.map(author=>
<option key={author._id}>{author.fname}</option>
)
}
</select>
</div>
<div><input placeholder="Price" ref={PriceInput=>this.PriceInput=PriceInput}/></div>
<div><input placeholder="Year" ref={YearInput=>this.YearInput=YearInput}/></div>
<div><input placeholder="Publisher" ref={PublisherInput=>this.PublisherInput=PublisherInput}/></div>
<div><Button onClick={this.onSubmit}>Add Book</Button></div>
</form>
</div>
}
}
View.jsx
'use strict';
import React, {Component} from 'react';
import axios from 'axios';
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
books:[]
};
}
componentWillMount(){
axios.get(`http://localhost:8095/books`).then(res=>{
const books=res.data;
this.setState({books});
console.log(books);
})
}
render() {
return <div>
<h2>This is the available book list</h2>
<div>
{
this.state.books.map(book =>
<div>
<span key={book._id}>Name:{book.Name}</span>
</div>
)
}
</div>
</div>
}
}
I am also new to React,so there may be redundancies in code.But this works fine.Hope this will help.
1 Comment
Tim Diekmann
Generally, answers are much more helpful if they include an explanation of what the code is intended to do, and why that solves the problem without introducing others. Thanks for improving the answer's reference value and making it more understandable!