Develop Reference

ReactJs form validation errors are is not working properly for me

I have a project in React class based component and I have form where if i write something and if remove the input data so it is showing error like enter data properly which is but if i am again entering right data in input so the error should go, but it is still there.
import React, {Component} from 'react';
import '../scss/contact.scss';
import '../scss/content.scss';
import ReCAPTCHA from "react-google-recaptcha";
import TextField from '#material-ui/core/TextField'
import { Dialog } from '#material-ui/core';
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faCheck } from '#fortawesome/free-solid-svg-icons'
class Contact extends Component {
constructor(props) {
super(props)
this.state = {
email_id: "",
full_name: "",
error: {},
};
this.verifyCallback = this.verifyCallback.bind(this);
console.log(this.verifyCallback);
}
handleClose = (e) => [
this.setState({
open: false,
})
]
formSubmit = (e) => {
e.preventDefault();
this.handleClose();
this.showDemoSlider();
let data = Object.keys(this.state).reduce((acc , item) => {
if(item !== 'error') {
return {
...acc,
[item]: this.state[item]
}
}
} , {});
console.log(data);
}
inputChange = (e) => {
const { error } = this.state;
console.log("hey")
if( e.target.value && e.target.name === 'email_id'){
if(/^\w+([\.-]?\w+)*#\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(e.target.value)){
this.setState({
email_id: e.target.value
})
} else {
this.setState({
error: {
...error,
email_id: true,
},
});
}
} else {
this.setState({
[e.target.name]: e.target.value,
});
}
}
handleInputOnBlur = (inputType) => {
if(!this.state[inputType]) {
this.setState({
error: {
...this.state.error,
[inputType]: true
}
})
}
}
verifyCallback(recaptchaToken) {
// Here you will get the final recaptchaToken!!!
this.setState({
recaptchaToken
})
//console.log(recaptchaToken, "<= your recaptcha token")
}
showDemoSlider = () => {
this.setState({
infoDialog: !this.state.infoDialog
})
}
render() {
const {error , full_name , recaptchaToken , email_id , subject} = this.state;
return (
jsx starts from here
<div>
<div className="dummy-header"></div>
<section>
<div className="comman-page-heading">
<h2>Contact Us</h2>
</div>
</section>
<section>
<div className="contact-sec-1">
<div className="row">
<div className="col-md-4">
<div className="contact-box">
<div className="contact-box-icon">
<i class="fa fa-phone"></i>
</div>
<div className="contact-box-content">
<h2>Phone Number</h2>
<ul>
<li>+1 (123) 915 789</li>
<li>+8 (123) 915 789</li>
</ul>
</div>
</div>
</div>
<div className="col-md-4">
<div className="contact-box">
<div className="contact-box-icon">
<i class="fa fa-envelope"></i>
</div>
<div className="contact-box-content">
<h2>Our Email</h2>
<ul>
<li>contacct#contact.com</li>
<li>support#yoursite.com</li>
</ul>
</div>
</div>
</div>
<div className="col-md-4">
<div className="contact-box">
<div className="contact-box-icon">
<i class="fa fa-map-marker"></i>
</div>
<div className="contact-box-content">
<h2>Our Address</h2>
<ul>
<li>random adrres</li>
<li>New York 200</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
<section>
<div className="contact-form">
<h2>Send Message</h2>
<div className="form">
{<form >
<div className="row">
<div className="col-md-4">
<div onBlur={() => this.handleInputOnBlur('full_name')} className="textInput">
<TextField
className="textField"
type="text"
variant='outlined'
name="full_name"
onChange={this.inputChange}
placeholder="Enter Full Name"
error={error.full_name}
id="outlined-error-helper-text"
helperText={error.full_name && 'Field cannot be empty'}
/>
</div>
</div>
<div className="col-md-4">
<div onBlur={() => this.handleInputOnBlur('subject')} className="textInput">
<TextField
className="textField"
type="text"
variant='outlined'
onChange={this.inputChange}
name="subject"
placeholder="Subject"
error={error.subject}
id="outlined-error-helper-text"
helperText={error.subject || 'Field cannot be empty'}
/>
</div>
</div>
<div className="col-md-4">
<div onBlur={() => this.handleInputOnBlur('email_id')} className="textInput">
<TextField
className="textField"
type="email"
variant='outlined'
onChange={this.inputChange}
name="email_id"
error={error.email_id}
id="outlined-error-helper-text"
helperText={error.email_id && 'Enter a valid email and cannot be empty' }
placeholder="Enter Email" />
</div>
</div>
<div className="col-md-12">
<textarea
name="message"
onChange={this.inputChange}
placeholder="Write your message"
>
</textarea>
</div>
<div className="col-md-4">
<ReCAPTCHA
className="textField"
ref={(r) => this.captcha = r}
sitekey="6Lc57sMUAAAAAEpCDQ-UFqwaOlgNIpLLbF1VNZ_2"
onChange={this.verifyCallback}
/>
</div>
<div className="submit-btn">
<button
onClick={this.formSubmit}
disabled={!full_name || !recaptchaToken || !subject || !email_id}
className="btn">
Send Message
</button>
</div>
</div>
</form>}
</div>
</div>
</section>
<section>
<div className="map">
</div>
</section>
{this.state.infoDialog && <Dialog
open={this.state.infoDialog}
onClose={this.showDemoSlider}
className="demoDialog"
>
<div className="toggleMsg">
<div className="msgContent">
<div >
<FontAwesomeIcon className="icon" style={{textAlign: 'center'}} icon={faCheck}/>
</div>
<h1>Form Submitted</h1>
<p>Thank you for your visit</p>
</div>
</div>
</Dialog>}
</div>
)
}
}
export default Contact;

when i use the create function using django rest framework it dosent create a new person

when i use the create function using django rest framework it dosent create a new person instead it shows an error 405 Method Not Allowed. I even tried creating new person using frontend it just dosent work.
views.py
#api_view(['POST'])
def create_person(request):
serializer = PersonSerializer(data=request.data)
if serializer.is_valid():
serializer.save()
return Response(serializer.data)
create.js:
const Create = () => {
let history = useHistory();
let [person, setPerson] = useState({
name:"",
about:"",
email:"",
image:"",
})
let createPerson = () => {
e.preventDefault()
fetch(`/api/person-create/`, {
method: "POST",
headers: {
"content-type": 'application/json'
},
body: JSON.stringify(person)
})
.then(setPerson({
name:"",
about:"",
email:"",
image:"",
}))
}
let handleChange = (e) => {
setPerson({...person, [e.target.id]: e.target.value});
console.log(person)
}
useEffect(() => {
console.log("correct", person);
}, [person]);
return (
<div class="container">
<div class="row justify-content-center">
<form onSubmit={(e) => createPerson(e)}>
<div>
<h2>
<button onClick={() => history.push('/')} className="btn btn-primary mt-4">
❮ Back
</button>
</h2>
<h2 className="mt-4 mb-4" style={{width: '600px'}}>
New Person
</h2>
<div className="form-group" style={{width: '600px'}}>
<label>Name</label>
<input onChange={handleChange} className="form-control" id="name" placeholder="Enter Name" value={person.name} />
</div>
<div className="form-group" style={{width: '600px'}}>
<label for="exampleInputEmail1">About</label>
<textarea style={{height: '250px'}} onChange={handleChange} className="form-control" id="about" placeholder="Tell us somthing about yourself" value={person.about} />
</div>
<div className="form-group" style={{width: '600px'}}>
<label>Email</label>
<input onChange={handleChange} className="form-control" id="email" placeholder="Enter Email" value={person.email} />
</div>
<div className="custom-file mt-3">
<input onChange={handleChange} type="file" className="custom-file-input" id="image" value={person.image} />
<label className="custom-file-label" for="customFile">Choose file</label>
</div>
<button type="submit" className="btn btn-primary mt-4">Submit</button>
</div>
</form>
</div>
</div>
)
}
export default Create
i dont understand whats wrong here. i am pretty sure about the views and dont think that it is wrong not sure about the react part tho. any help will be appreciated. Thanks

Not changing values of form reactjs

I have a form in which I am generating form fields dynamically . Now Issue is fields which are not dynamically generated are getting input and those field which are dynamically generated are not taking input in fields. name='name' and name='age' fields are not getting input I cant insert data in them . while first two fields owner and description are working fine
import React from "react";
class Form extends React.Component {
state = {
cats: [{ name: "", age: "" }],
owner: "",
description: ""
};
handleChange = e => {
alert('inot');
if (["name", "age"].includes(e.target.className)) {
let cats = [...this.state.cats];
cats[e.target.dataset.id][
e.target.className
] = e.target.value.toUpperCase();
this.setState({ cats }, () => console.log(this.state.cats));
} else {
this.setState({ [e.target.name]: e.target.value.toUpperCase() });
}
};
addCat = e => {
this.setState(prevState => ({
cats: [...prevState.cats, { name: "", age: "" }]
}));
};
handleSubmit = e => {
e.preventDefault();
};
handleClick = e => document.getElementById(e.target.id).remove();
// changeOption =(e) => {
// this.setState.cats(e.target.value);
// }
render() {
let { owner, description, cats } = this.state;
return (
<form onSubmit={this.handleSubmit} onChange={this.handleChange}>
<div className='row mt-5'>
<div className='col-md-12 mb-5'>
<h3 className='text-center text-primary'>Create Products Option</h3>
</div>
<div className='col-md-3'></div>
<div className='col-md-3'>
<label htmlFor='name'>
<b>Owner</b>
</label>
<input
type='text'
className='form-control'
name='owner'
id='owner'
value={owner}
/>
</div>
<div className='col-md-3'>
<label htmlFor='description'>
<b>Description</b>
</label>
<input
type='text'
className='form-control'
name='description'
id='description'
value={description}
/>
<button
className='btn btn-success rounded-0 w-25 float-right mt-2 shadow-none'
onClick={this.addCat}
>
+
</button>
</div>
<div className='col-md-3'></div>
</div>
{cats.map((val, idx) => {
let catId = `cat-${idx}`,
ageId = `age-${idx}`;
return (
<form onSubmit={this.handleSubmit} onChange={this.handleChange}>
<div id={ageId} key={idx}>
<div className='row mt-5'>
<div className='col-md-3'></div>
<div className='col-md-3'>
<label htmlFor={catId}>
<b>{`Cat #${idx + 1}`}</b>
</label>
<input
type='text'
name='name'
data-id={idx}
id={catId}
value={cats[idx].name}
className='name form-control'
/>
</div>
<div className='col-md-3'>
<label htmlFor={ageId}>
<b>Age</b>
</label>
<input
type='text'
name='age'
data-id={idx}
id={ageId}
value={cats[idx].age}
className='age form-control'
/>
<button
className='btn btn-success rounded-0 w-25 float-right mt-2 shadow-none'
onClick={this.addCat}
>
+
</button>
<input
type='button'
name={ageId}
data-id={idx}
id={ageId}
value={"-"}
className='age float-right mt-2 mr-3 btn btn-danger w-25 rounded-0 w-25 shadow-none'
onClick={this.handleClick}
/>
</div>
<div className='col-md-3'></div>
</div>
</div>
</form>
);
})}
<div className='row mt-3'>
<div className='col-md-3'></div>
<div className='col-md-3'>
<label htmlFor='name'>
<b>Min Selection</b>
</label>
<input
type='text'
className='form-control'
name='min'
id='min'
value={""}
/>
</div>
<div className='col-md-3'>
<label htmlFor='description'>
<b>Max Selection</b>
</label>
<input
type='text'
className='form-control'
name='max'
id='max'
value={""}
/>
<input
className='float-right btn btn-success mt-3'
type='submit'
value='Submit'
/>
{/* <button className="float-right" onClick={this.addCat}>Add new cat</button> */}
</div>
<div className='col-md-3'></div>
</div>
</form>
);
}
}
export default Form;

Codesandbox here. Looks like you should be seeing some errors in your console that might provide some explanation:
Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
Detailed answer
Working Sandbox here. There are a few things wrong here:
Your handleChange function needs to change
Your function is looking at className which won't work. Your inputs return form-control name for example. Instead try using the element's name.
Updated function:
handleChange = e => {
if (["name", "age"].includes(e.target.name)) {
let cats = [...this.state.cats];
cats[e.target.dataset.id][e.target.name] = e.target.value.toUpperCase();
this.setState({ cats }, () => console.log(this.state.cats));
} else {
this.setState({ [e.target.name]: e.target.value.toUpperCase() });
}
};
Aside
Do not render <form> elements in other <form> elements.
Don't do this. You don't need another form here. Just remove that.
// Line 76-80:
{cats.map((val, idx) => {
let catId = `cat-${idx}`,
ageId = `age-${idx}`;
return (
<form onSubmit={this.handleSubmit} onChange={this.handleChange}>
// ...

Unable to get form data after setState

I am trying to send form data after submitting to the firebase database using redux in my react application, but I am unable to send the state so I tried tracking form data by console.log but the form data is empty. I am able to console log params but not this.state
Below is the code.
I am using redux in this app. createUser is my action
import React, { Component } from "react";
import { connect } from "react-redux";
import { createUser } from "../store/actions/userActions";
class UserForm extends Component {
constructor(props) {
super(props);
this.state = { form: [], alert: false, alertData: {} };
this.submitMessage = this.submitMessage.bind(this);
}
submitMessage = e => {
e.preventDefault();
const params = {
name: this.inputName.value,
email: this.inputEmail.value,
city: this.inputCity.value,
age: this.inputAge.value
};
this.setState({ form: params });
console.log(params);
console.log("-----------");
console.log(this.state);
this.props.createUser(this.state);
};
render() {
return (
<div className="container">
<div
className="row"
>
User
</div>
<div className="container" style={{ padding: `10px 0px` }} />
<div className="row">
<div className="col-sm-4">
<h2>Contact Form</h2>
<form onSubmit={this.submitMessage} ref="contactForm">
<div className="form-group">
<label htmlFor="name">Name</label>
<input
type="text"
className="form-control"
id="name"
placeholder="Name"
ref={name => (this.inputName = name)}
/>
</div>
<div className="form-group">
<label htmlFor="emai1">Email</label>
<input
type="email"
className="form-control"
id="email"
placeholder="Email"
ref={email => (this.inputEmail = email)}
/>
</div>
<div className="form-group">
<label htmlFor="city">City</label>
<select
className="form-control"
id="city"
ref={city => (this.inputCity = city)}
>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Japan">Japan</option>
<option value="Germany">Germany</option>
</select>
</div>
<div className="form-group">
<label htmlFor="age">Age</label>
<input
type="number"
className="form-control"
id="age"
placeholder="Age"
ref={age => (this.inputAge = age)}
/>
</div>
<button type="submit" className="btn btn-primary">
Send
</button>
</form>
</div>
</div>
</div>
);
}
}
const mapStateToProps = state => {
return {};
};
const mapDispatchToProps = dispatch => {
return {
createUser: user => dispatch(createUser)
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(UserForm);

Due to setState is asynchronous you can access the changed state in a callback which you can pass as a second param to setState method. Please read more about setState
submitMessage = e => {
e.preventDefault();
const params = {
name: this.inputName.value,
email: this.inputEmail.value,
city: this.inputCity.value,
age: this.inputAge.value
};
this.setState({ form: params }, () => {
console.log(params);
console.log("-----------");
console.log(this.state);
this.props.createUser(this.state);
});
};

You call createUser before setState is finished. Why use the state anyway? I would suggest:
submitMessage = e => {
e.preventDefault();
const params = {
name: this.inputName.value,
email: this.inputEmail.value,
city: this.inputCity.value,
age: this.inputAge.value
};
this.props.createUser(params);
};

There is you are missing two things,
Set state is async in nature so after set state, you must use call back to access it.
You are not passing form data ie. Params to createUser
Solution :
import React, { Component } from "react";
import { connect } from "react-redux";
import { createUser } from "../store/actions/userActions";
class UserForm extends Component {
constructor(props) {
super(props);
this.state = { form: [], alert: false, alertData: {} };
this.submitMessage = this.submitMessage.bind(this);
}
submitMessage = e => {
e.preventDefault();
const params = {
name: this.inputName.value,
email: this.inputEmail.value,
city: this.inputCity.value,
age: this.inputAge.value
};
this.setState({ form: params },()=>{
this.props.createUser(this.state);
});
};
render() {
return (
<div className="container">
<div
className="row"
>
User
</div>
<div className="container" style={{ padding: `10px 0px` }} />
<div className="row">
<div className="col-sm-4">
<h2>Contact Form</h2>
<form onSubmit={this.submitMessage} ref="contactForm">
<div className="form-group">
<label htmlFor="name">Name</label>
<input
type="text"
className="form-control"
id="name"
placeholder="Name"
ref={name => (this.inputName = name)}
/>
</div>
<div className="form-group">
<label htmlFor="emai1">Email</label>
<input
type="email"
className="form-control"
id="email"
placeholder="Email"
ref={email => (this.inputEmail = email)}
/>
</div>
<div className="form-group">
<label htmlFor="city">City</label>
<select
className="form-control"
id="city"
ref={city => (this.inputCity = city)}
>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="Japan">Japan</option>
<option value="Germany">Germany</option>
</select>
</div>
<div className="form-group">
<label htmlFor="age">Age</label>
<input
type="number"
className="form-control"
id="age"
placeholder="Age"
ref={age => (this.inputAge = age)}
/>
</div>
<button type="submit" className="btn btn-primary">
Send
</button>
</form>
</div>
</div>
</div>
);
}
}
const mapStateToProps = state => {
return {};
};
const mapDispatchToProps = dispatch => {
return {
createUser: user => dispatch(createUser(user))
};
};
export default connect(
mapStateToProps,
mapDispatchToProps
)(UserForm);

Disable a button when the input fields are empty in reactjs

Im new to reactJS. Im wondering why my code below doesnt work. Everything works except disabling my NEXT button when text fields are empty. My expectation is that after i fill out ALL the textboxes, the NEXT button will be enabled.
class Registration extends React.Component {
constructor (props) {
super (props);
this.state = {
selectedGender: null,
errors: [],
initComplete: false
}
this._handleSubmit = this._handleSubmit.bind(this);
this._handleInputMobileOnChange =
this._handleInputMobileOnChange.bind(this);
this.clearError = this.clearError.bind(this);
}
clearError () {
this.setState({ errors: [] });
}
_handleInputMobileOnChange (e) {
e.preventDefault();
this.clearError();
e.target.value = utils.removeNonNumbers(e.target.value);
//this.setState({value: e.target.value})
}
change(e){
if("" != e.target.value){
this.button.disabled = false;
}
else{
this.button.disabled = true;
}
}
render() {
return (
<div className="container-fluid">
<form onSubmit={this._handleSubmit}>
<div className="form-group has-danger">
<label htmlFor="input-MobileNum">number *</label>
<input ref={(ref) => this.inputMobile = ref} type="tel" className={'form-control ' } id="input-MobileNum" onChange={()=>{ this._handleInputMobileOnChange; this.change.bind(this)}} defaultValue=""/>
</div>
<div className="form-group has-danger">
<label htmlFor="input-Email">Email address *</label>
<input ref={(ref) => this.inputEmail = ref} type="email" className={'form-control '} id="input-Email" defaultValue="" onChange={()=>{ this.clearError; this.change.bind(this)}}/>
</div>
<div className="form-group has-danger">
<label htmlFor="input-Invitation">Invitation code</label>
<input ref={(ref) => this.inputInvitation = ref} type="text" className={'form-control '} id="input-Invitation" defaultValue="" onChange={()=>{ this.clearError; this.change.bind(this)}}/>
</div>
<div className="form-group cta">
//NEXT BUTTON
<button type="submit" className="btn btn-primary" ref={(button) => this.button=button}>Next</button>
</div>
</form>
</div>
)
}
THANKS!!!
I updated my code to this. And i tested it case by case. Only mobile works, the email and invitation code dont work for some reason.
class Registration extends React.Component {
constructor (props) {
super (props);
this.state = {
selectedGender: null,
errors: [],
initComplete: false
}
this._handleSubmit = this._handleSubmit.bind(this);
this._handleInputMobileOnChange =
this._handleInputMobileOnChange.bind(this);
this._handleInputEmailOnChange =
this._handleInputEmailOnChange.bind(this);
this._handleInputInvitationOnChange =
this._handleInputInvitationOnChange.bind(this);
this.clearError = this.clearError.bind(this);
}
clearError () {
this.setState({ errors: [] });
}
disable(){
let disable = true;
if (this.state.inputMobile || this.state.inputEmail || this.state.inputInvitation) { //I tried && operator, still only mobile works
disable = false;
}
return disable;
}
_handleInputMobileOnChange (e) {
e.preventDefault();
this.clearError();
e.target.value = utils.removeNonNumbers(e.target.value);
this.setState({inputMobile: e.target.value})
}
_handleInputEmailOnChange(e){
e.preventDefault();
this.clearError();
e.target.value = utils.removeNonNumbers(e.target.value);
this.setState({inputEmail: e.target.value})
}
_handleInputInvitationOnChange(e){
e.preventDefault();
this.clearError();
e.target.value = utils.removeNonNumbers(e.target.value);
this.setState({inputInvitation: e.target.value})
}
change(e){
if("" != e.target.value){
this.button.disabled = false;
}
else{
this.button.disabled = true;
}
}
render() {
return (
<div className="container-fluid">
<form onSubmit={this._handleSubmit}>
<div className="form-group has-danger">
<label htmlFor="input-MobileNum">number *</label>
<input ref={(ref) => this.inputMobile = ref} type="tel" className={'form-control ' } id="input-MobileNum" onChange={this._handleInputMobileOnChange}} defaultValue=""/>
</div>
<div className="form-group has-danger">
<label htmlFor="input-Email">Email address *</label>
<input ref={(ref) => this.inputEmail = ref} type="email" className={'form-control '} id="input-Email" defaultValue="" onChange={this._handleInputEmailOnChange}/>
</div>
<div className="form-group has-danger">
<label htmlFor="input-Invitation">Invitation code</label>
<input ref={(ref) => this.inputInvitation = ref} type="text" className={'form-control '} id="input-Invitation" defaultValue="" onChange={this._handleInputInvitationOnChange}/>
</div>
<div className="form-group cta">
//NEXT BUTTON
<button type="submit" className="btn btn-primary" disabled={this.disable()}>Next</button>
</div>
</form>
</div>
)
}
Nvm. I was being stupid. The code above works! :)))

You should consider using controlled input elements rather than uncontrolled. This lets react manage the values of your input elements which makes things a bit easier.
First of all start by adding the initial values of each input element to to your constructor. You probably just want empty strings here ("").
Then, add a change event listener for each input element and create a function for each. Each such function should then check what the value for the other elements are, as well as its own, and then enable or disable the button.
Demo:
class Registration extends React.Component {
constructor (props) {
super(props);
this.state = {
selectedGender: null,
errors: [],
initComplete: false,
buttonIsDisabled: true,
numberValue: "",
emailValue: "",
codeValue: "",
}
this.changeNumber = this.changeNumber.bind(this);
this.changeEmail = this.changeEmail.bind(this)
this.changeCode = this.changeCode.bind(this);
}
changeNumber = (e) => {
let s = true;
if(this.state.emailValue.length && this.state.codeValue.length && e.target.value.length) {
s = false;
}
let val = e.target.value;
//let val = utils.removeNonNumbers(e.target.value);
this.setState({numberValue: val, buttonIsDisabled: s, errors: []});
}
changeEmail = (e) => {
let s = true;
if(this.state.numberValue.length && this.state.codeValue.length && e.target.value.length) {
s = false;
}
this.setState({emailValue: e.target.value, buttonIsDisabled: s, errors: []});
}
changeCode = (e) => {
let s = true;
if(this.state.numberValue.length && this.state.emailValue.length && e.target.value.length) {
s = false;
}
this.setState({codeValue: e.target.value, buttonIsDisabled: s, errors: []});
}
render() {
return (
<div className="container-fluid">
<form onSubmit={this._handleSubmit}>
<div className="form-group has-danger">
<label htmlFor="input-MobileNum">number *</label>
<input type="tel" className={'form-control ' } id="input-MobileNum" onChange={this.changeNumber} />
</div>
<div className="form-group has-danger">
<label htmlFor="input-Email">Email address *</label>
<input type="email" className={'form-control '} id="input-Email" onChange={this.changeEmail} />
</div>
<div className="form-group has-danger">
<label htmlFor="input-Invitation">Invitation code</label>
<input type="text" className={'form-control '} id="input-Invitation" onChange={this.changeCode} />
</div>
<div className="form-group cta">
<button type="submit" className="btn btn-primary" disabled={this.state.buttonIsDisabled} ref={(button) => this.button=button}>Next</button>
</div>
</form>
</div>
)
}}
ReactDOM.render(<Registration />, document.getElementById("myApp"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="myApp"></div>

Keep a state disabled and then on change function check whether all inputs have value , then set the state disabled to false like below snippet
class Registration extends React.Component {
constructor (props) {
super (props);
this.state = {
selectedGender: null,
errors: [],
initComplete: false,
disabled: true
}
this._handleSubmit = this._handleSubmit.bind(this);
this._handleInputMobileOnChange =
this._handleInputMobileOnChange.bind(this);
this.clearError = this.clearError.bind(this);
}
clearError () {
this.setState({ errors: [] });
}
_handleInputMobileOnChange (e) {
e.preventDefault();
this.clearError();
e.target.value = utils.removeNonNumbers(e.target.value);
//this.setState({value: e.target.value})
}
change = () => {
if(this.inputMobile !== '' && this.inputEmail !== '' && this.inputInvitation != '' ) {
this.setState({disabled: false});
}
}
render() {
return (
<div className="container-fluid">
<form onSubmit={this._handleSubmit}>
<div className="form-group has-danger">
<label htmlFor="input-MobileNum">number *</label>
<input ref={(ref) => this.inputMobile = ref} type="tel" className={'form-control ' } id="input-MobileNum" onChange={()=>{ this._handleInputMobileOnChange; this.change.bind(this)}} defaultValue=""/>
</div>
<div className="form-group has-danger">
<label htmlFor="input-Email">Email address *</label>
<input ref={(ref) => this.inputEmail = ref} type="email" className={'form-control '} id="input-Email" defaultValue="" onChange={()=>{ this.clearError; this.change.bind(this)}}/>
</div>
<div className="form-group has-danger">
<label htmlFor="input-Invitation">Invitation code</label>
<input ref={(ref) => this.inputInvitation = ref} type="text" className={'form-control '} id="input-Invitation" defaultValue="" onChange={()=>{ this.clearError; this.change.bind(this)}}/>
</div>
<div className="form-group cta">
//NEXT BUTTON
<button type="submit" className="btn btn-primary" ref={(button) => this.button=button} disabled={this.state.disabled}>Next</button>
</div>
</form>
</div>
)
}