I have tried countless googling and trouble shooting. I am following a tutorial online and in the tutorial they use this kind of syntax (where the javascript code is below the constructor and above the render.
export default class NewFormDetails extends Component {
constructor(props) {
super(props);
this.state = {
validated: false,
language: 'en',
siteName: null,
counties: null,
siteAddress: null,
siteEmail: null,
siteNumber: null,
siteCat: null,
openTimes: null,
fees: null,
access: null,
gps: null,
w3w: null,
textHeader: null,
textContent: null
};
}
let jsonLang;
if (this.state.language == 'en') {
jsonLang = data.en;
} else if (this.state.language == 'es') {
jsonLang = data.es;
} else {
jsonLang = data.en;
}
const placeholders = jsonLang.placeholders;
const counties = jsonLang.counties;
const handleChange = e => {
this.setState({ ...this.state, [e.target.name]: e.target.value });
}
const handleSubmit = () => {
console.log(this.state);
}
render() {
return (
<Form onSubmit={this.handleSubmit} className="form">
{/* General Information */}
<FormGroup row>
<Col sm={6}>
<Input type="text" onChange={this.handleChange} name="siteName" id="siteName" placeholder={placeholders.siteName}/>
</Col>
<Col sm={6}>
<Input className="form-control" type="select" id="counties" onChange={this.handleChange}>
<option className="selectDefault" disabled value={placeholders.siteCounties} selected>{placeholders.siteCounty}</option>
{ counties.map(c => (<option key={c.value} value={c.value}>{c.display}</option>))}
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col sm={12}>
<Input type="textarea" onChange={this.handleChange} name="siteAddress" placeholder={placeholders.siteAdd} id="siteAddress" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm={6}>
<Input type="email" name="siteEmail" onChange={this.handleChange} id="siteEmail" placeholder={placeholders.email} />
</Col>
<Col sm={6}>
<Input type="tel" name="siteNumber" onChange={this.handleChange} id="siteNumber" placeholder={placeholders.number}/>
</Col>
</FormGroup>
<FormGroup row>
<Col sm={6}>
<Input type="select" name="siteCat" onChange={this.handleChange} id="siteCat" multiple placeholder={placeholders.categories}>
<option className="selectDefault" disabled selected>{placeholders.categories}</option>
<option value="">1</option>
<option value="">1</option>
<option value="">1</option>
<option value="">1</option>
</Input>
</Col>
<Col sm={6}>
<Input type="text" name="openTimes" onChange={this.handleChange} id="openTimes" placeholder={placeholders.times} />
</Col>
</FormGroup>
<FormGroup row>
<Col sm={6}>
<Input type="textarea" name="fees" onChange={this.handleChange} id="fees" placeholder={placeholders.fees}/>
</Col>
<Col sm={6}>
<Input type="text" name="access" onChange={this.handleChange} id="access" placeholder={placeholders.access} />
</Col>
</FormGroup>
<hr/>
{/* Location Information */}
<FormGroup row>
<Col sm={6}>
<Input type="text" name="gps" onChange={this.handleChange} id="gps" placeholder={placeholders.gps}/>
</Col>
<Col sm={6}>
<Input type="text" name="w3w" id="w3w" onChange={this.handleChange} placeholder={placeholders.w3w} />
</Col>
</FormGroup>
<hr/>
<FormGroup row>
<Col sm={12}>
<Input type="textarea" name="txtHeader" onChange={this.handleChange} id="txtHeader" placeholder={placeholders.textHeader} />
</Col>
</FormGroup>
<FormGroup row>
<Col sm={12}>
<Input type="textarea" name="txtContent" onChange={this.handleChange} id="txtContent" placeholder={placeholders.textContent} />
</Col>
</FormGroup>
<FormGroup check row>
<Col sm={{ size: 10, offset: 2 }}>
<Link to="/newSite/tours"><Button className="btn-primary">Tours →</Button></Link>
</Col>
</FormGroup>
</Form>
);
}
}
But I am getting the error: Unexpected token under let jsonLang;.
Please help! I have tried adding/removing braces, semi-colons etc.
Code inside a class definition needs to be inside a class method for it to be valid. If you want something to run everytime an object is instantiated you can write said instructions inside the constructor or in a method that gets called within said constructor:
export default class NewFormDetails extends Component {
constructor(props) {
super(props);
this.state = {
validated: false,
language: 'en',
siteName: null,
counties: null,
siteAddress: null,
siteEmail: null,
siteNumber: null,
siteCat: null,
openTimes: null,
fees: null,
access: null,
gps: null,
w3w: null,
textHeader: null,
textContent: null
};
let jsonLang;
if (this.state.language == 'en') {
jsonLang = data.en;
} else if (this.state.language == 'es') {
jsonLang = data.es;
} else {
jsonLang = data.en;
}
this.placeholders = jsonLang.placeholders;
this.counties = jsonLang.counties;
}
handleChange = e => {
this.setState({ ...this.state, [e.target.name]: e.target.value });
}
handleSubmit = () => {
console.log(this.state);
}
render() {
return (
<Form onSubmit={this.handleSubmit} className="form">
{/* General Information */}
<FormGroup row>
<Col sm={6}>
<Input type="text" onChange={this.handleChange} name="siteName" id="siteName" placeholder={this.placeholders.siteName}/>
</Col>
<Col sm={6}>
<Input className="form-control" type="select" id="counties" onChange={this.handleChange}>
<option className="selectDefault" disabled value={this.placeholders.siteCounties} selected>{this.placeholders.siteCounty}</option>
{ this.counties.map(c => (<option key={c.value} value={c.value}>{c.display}</option>))}
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col sm={12}>
<Input type="textarea" onChange={this.handleChange} name="siteAddress" placeholder={this.placeholders.siteAdd} id="siteAddress" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm={6}>
<Input type="email" name="siteEmail" onChange={this.handleChange} id="siteEmail" placeholder={this.placeholders.email} />
</Col>
<Col sm={6}>
<Input type="tel" name="siteNumber" onChange={this.handleChange} id="siteNumber" placeholder={this.placeholders.number}/>
</Col>
</FormGroup>
<FormGroup row>
<Col sm={6}>
<Input type="select" name="siteCat" onChange={this.handleChange} id="siteCat" multiple placeholder={this.placeholders.categories}>
<option className="selectDefault" disabled selected>{this.placeholders.categories}</option>
<option value="">1</option>
<option value="">1</option>
<option value="">1</option>
<option value="">1</option>
</Input>
</Col>
<Col sm={6}>
<Input type="text" name="openTimes" onChange={this.handleChange} id="openTimes" placeholder={this.placeholders.times} />
</Col>
</FormGroup>
<FormGroup row>
<Col sm={6}>
<Input type="textarea" name="fees" onChange={this.handleChange} id="fees" placeholder={this.placeholders.fees}/>
</Col>
<Col sm={6}>
<Input type="text" name="access" onChange={this.handleChange} id="access" placeholder={this.placeholders.access} />
</Col>
</FormGroup>
<hr/>
{/* Location Information */}
<FormGroup row>
<Col sm={6}>
<Input type="text" name="gps" onChange={this.handleChange} id="gps" placeholder={this.placeholders.gps}/>
</Col>
<Col sm={6}>
<Input type="text" name="w3w" id="w3w" onChange={this.handleChange} placeholder={this.placeholders.w3w} />
</Col>
</FormGroup>
<hr/>
<FormGroup row>
<Col sm={12}>
<Input type="textarea" name="txtHeader" onChange={this.handleChange} id="txtHeader" placeholder={this.placeholders.textHeader} />
</Col>
</FormGroup>
<FormGroup row>
<Col sm={12}>
<Input type="textarea" name="txtContent" onChange={this.handleChange} id="txtContent" placeholder={this.placeholders.textContent} />
</Col>
</FormGroup>
<FormGroup check row>
<Col sm={{ size: 10, offset: 2 }}>
<Link to="/newSite/tours"><Button className="btn-primary">Tours →</Button></Link>
</Col>
</FormGroup>
</Form>
);
}
}
You made an error with the enclosing "}". Now you are outside the constructor method and can only write plain JavaScript meaning that you can define variables using "var"
var jsonLang = 'en'
or you put the logic after the setState
constructor(props) {
super(props);
this.state = {
validated: false,
language: 'en',
siteName: null,
counties: null,
siteAddress: null,
siteEmail: null,
siteNumber: null,
siteCat: null,
openTimes: null,
fees: null,
access: null,
gps: null,
w3w: null,
textHeader: null,
textContent: null
};
let jsonLang;
if (this.state.language == 'en') {
jsonLang = data.en;
} else if (this.state.language == 'es') {
jsonLang = data.es;
} else {
jsonLang = data.en;
}
const placeholders = jsonLang.placeholders;
const counties = jsonLang.counties;
}
The problem is that your render() method is outside of constructor() range block.
Should be:
export default class NewFormDetails extends Component
{
constructor(props)
{
super(props);
this.state = {
validated: false,
language: 'en',
siteName: null,
counties: null,
siteAddress: null,
siteEmail: null,
siteNumber: null,
siteCat: null,
openTimes: null,
fees: null,
access: null,
gps: null,
w3w: null,
textHeader: null,
textContent: null
};
}
render()
{
let jsonLang;
if (this.state.language == 'en')
{
jsonLang = data.en;
} else if (this.state.language == 'es')
{
jsonLang = data.es;
} else
{
jsonLang = data.en;
}
const placeholders = jsonLang.placeholders;
const counties = jsonLang.counties;
const handleChange = e =>
{
this.setState({ ...this.state, [e.target.name]: e.target.value });
}
const handleSubmit = () =>
{
console.log(this.state);
}
return (
<Form onSubmit={this.handleSubmit} className="form">
{/* General Information */}
<FormGroup row>
<Col sm={6}>
<Input type="text" onChange={this.handleChange} name="siteName" id="siteName" placeholder={placeholders.siteName} />
</Col>
<Col sm={6}>
<Input className="form-control" type="select" id="counties" onChange={this.handleChange}>
<option className="selectDefault" disabled value={placeholders.siteCounties} selected>{placeholders.siteCounty}</option>
{counties.map(c => (<option key={c.value} value={c.value}>{c.display}</option>))}
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col sm={12}>
<Input type="textarea" onChange={this.handleChange} name="siteAddress" placeholder={placeholders.siteAdd} id="siteAddress" />
</Col>
</FormGroup>
<FormGroup row>
<Col sm={6}>
<Input type="email" name="siteEmail" onChange={this.handleChange} id="siteEmail" placeholder={placeholders.email} />
</Col>
<Col sm={6}>
<Input type="tel" name="siteNumber" onChange={this.handleChange} id="siteNumber" placeholder={placeholders.number} />
</Col>
</FormGroup>
<FormGroup row>
<Col sm={6}>
<Input type="select" name="siteCat" onChange={this.handleChange} id="siteCat" multiple placeholder={placeholders.categories}>
<option className="selectDefault" disabled selected>{placeholders.categories}</option>
<option value="">1</option>
<option value="">1</option>
<option value="">1</option>
<option value="">1</option>
</Input>
</Col>
<Col sm={6}>
<Input type="text" name="openTimes" onChange={this.handleChange} id="openTimes" placeholder={placeholders.times} />
</Col>
</FormGroup>
<FormGroup row>
<Col sm={6}>
<Input type="textarea" name="fees" onChange={this.handleChange} id="fees" placeholder={placeholders.fees} />
</Col>
<Col sm={6}>
<Input type="text" name="access" onChange={this.handleChange} id="access" placeholder={placeholders.access} />
</Col>
</FormGroup>
<hr />
{/* Location Information */}
<FormGroup row>
<Col sm={6}>
<Input type="text" name="gps" onChange={this.handleChange} id="gps" placeholder={placeholders.gps} />
</Col>
<Col sm={6}>
<Input type="text" name="w3w" id="w3w" onChange={this.handleChange} placeholder={placeholders.w3w} />
</Col>
</FormGroup>
<hr />
<FormGroup row>
<Col sm={12}>
<Input type="textarea" name="txtHeader" onChange={this.handleChange} id="txtHeader" placeholder={placeholders.textHeader} />
</Col>
</FormGroup>
<FormGroup row>
<Col sm={12}>
<Input type="textarea" name="txtContent" onChange={this.handleChange} id="txtContent" placeholder={placeholders.textContent} />
</Col>
</FormGroup>
<FormGroup check row>
<Col sm={{ size: 10, offset: 2 }}>
<Link to="/newSite/tours"><Button className="btn-primary">Tours →</Button></Link>
</Col>
</FormGroup>
</Form>
);
}
}
let jsonLang;
const language = 'ss' ;
if (this.language == 'ss') {
jsonLang = language.data;
console.log(jsonLang);
} else {
jsonLang = language.data;
console.log(language);
}
let jsonLang = 'en';
have a goodday
Related
I am trying react-hook-forms. Is there anyway to not reset the form when submitting? Everytime I click submit form is reset.
import React from "react";
import { useForm } from "react-hook-form";
import {
Row,
Col,
Card,
CardHeader,
CardBody,
Form,
FormGroup,
Label,
Input,
Button
} from "reactstrap";
const Insights = props => {
const { register, handleSubmit, watch } = useForm();
const GetSearchForm = () => {
const timePickerStyle = { width: 96, important: "true" };
const onSearch = data => {
console.log(data);
};
return (
<Form onSubmit={handleSubmit(onSearch)}>
<Row>
<Col>
<FormGroup>
<Label for="exampleEmail">Account Id</Label>
<Input
type="number"
name="account"
id="account"
placeholder="AccountId"
innerRef={register}
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="examplePassword">Email</Label>
<Input
type="email"
name="email"
id="email"
placeholder="Email"
innerRef={register}
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="exampleEmail">xPage Id</Label>
<Input
type="number"
name="xpageid"
id="xpage"
placeholder="xPage Id"
innerRef={register}
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="examplePassword">Content Devider Id</Label>
<Input
type="number"
name="contentdevider"
id="contentdeviderid"
placeholder="Content Devider Id"
innerRef={register}
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="examplePassword">Custom Page Id</Label>
<Input
type="number"
name="custompage"
id="custompageid"
placeholder="Custom Page Id"
innerRef={register}
/>
</FormGroup>
</Col>
<Col>
<FormGroup>
<Label for="examplePassword">Service</Label>
<Input
type="text"
name="servicename"
id="servicename"
placeholder="Custom Page Id"
innerRef={register}
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col xs="4">
<FormGroup>
<Label for="exampleDate">Date</Label>
<Row>
<Col xs="8">
<Input
type="date"
name="date"
id="exampleDate"
placeholder="date placeholder"
innerRef={register}
/>
</Col>
<Col xs="3">
<Input
style={timePickerStyle}
type="time"
name="time"
id="exampleTime"
placeholder="time placeholder"
innerRef={register}
/>
</Col>
</Row>
</FormGroup>
</Col>
<Col xs="4">
<FormGroup>
<Label for="exampleDate">Date</Label>
<Row>
<Col xs="8">
<Input
type="date"
name="date"
id="exampleDate"
placeholder="date placeholder"
innerRef={register}
/>
</Col>
<Col xs="3">
<Input
style={timePickerStyle}
type="time"
name="time"
id="exampleTime"
placeholder="time placeholder"
innerRef={register}
/>
</Col>
</Row>
</FormGroup>
</Col>
</Row>
<Button>Submit</Button>
</Form>
);
};
return (
<Row>
<Col xs="12" lg="12">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i> Insights
</CardHeader>
<CardBody>
<GetSearchForm></GetSearchForm>
</CardBody>
</Card>
</Col>
</Row>
);
};
export default Insights;
Because GetSearchForm is its own component, it gets created every time Insights is being rerendered.
You call the register function with the innerRef, but since the Input changed, and it is not the same component (newly created), its getting newly registered, which resets the state.
You either can move the useForm to the GetSearchForm and pass the data back up on submit or inline the whole form in Insights.
while fetching data from google it showing OVER_QUERY_LIMIT.here i am using react-places-autocomplete npm. when i am using this npm inside dashboard then it showing like this. i am using a key for fetching data.this error message i am getting inside rendering process.
code:-
import React, { Component } from 'react';
import data1 from '../forms/data1'
import data2 from '../forms/data2'
import PlacesAutocomplete, {
geocodeByAddress,
getLatLng,
} from 'react-places-autocomplete';
import {
Button,
Card,
CardBody,
CardFooter,
CardHeader,
Col,
Form,
FormGroup,
Input,
Row,
} from 'reactstrap';
class data extends Component {
constructor(props) {
super(props);
this.state = {
newAssociate: true,
newOutlet: true,
address: '' ,
};
}
handleChange = address => {
this.setState({ address });
};
handleSelect = address => {
geocodeByAddress(address)
.then(results => getLatLng(results[0]))
.then(latLng => alert(JSON.stringify(latLng)))
.catch(error => console.error('Error', error));
};
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12" md="6">
<data1 />
</Col>
<Col xs="12" md="6">
<Card>
<CardHeader>
<strong>Outlet</strong>
</CardHeader>
<CardBody>
<Form action="" method="post" encType="multipart/form-data" className="form-horizontal">
<FormGroup row>
<Col md="6">
<PlacesAutocomplete
value={this.state.address}
onChange={this.handleChange}
onSelect={this.handleSelect}
>
{({ getInputProps, suggestions, getSuggestionItemProps, loading }) => (
<div>
<Input
{...getInputProps({
size: "sm",
placeholder: 'Search ...',
className: 'location-search-input',
})}
/>
<div className="autocomplete-dropdown-container">
{loading && <div>Loading...</div>}
{suggestions.map(suggestion => {
const className = suggestion.active
? 'suggestion-item--active'
: 'suggestion-item';
// inline style for demonstration purpose
const style = suggestion.active
? { backgroundColor: '#fafafa', cursor: 'pointer' }
: { backgroundColor: '#ffffff', cursor: 'pointer' };
return (
<div
{...getSuggestionItemProps(suggestion, {
className,
style,
})}
>
<span>{suggestion.description}</span>
</div>
);
})}
</div>
</div>
)}
</PlacesAutocomplete>
</Col>
<Col md="6">
<Input type="select" name="selectSm" id="SelectLm" bsSize="sm">
<option value="0">City</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="6">
<Input type="email" id="email-input" name="email-input" bsSize="sm" placeholder="Email" autoComplete="email"/>
</Col>
<Col xs="12" md="6">
<Input type="select" name="selectSm" id="SelectLm" bsSize="sm">
<option value="0">Category</option>
<option value="1">Restaurants</option>
<option value="2">Bars & Pubs</option>
<option value="3">Beauty</option>
</Input>
</Col>
</FormGroup>
<FormGroup row>
<Col md="6">
<Input id="landline-input" name="landline-input" bsSize="sm" placeholder="Land Line"/>
</Col>
<Col xs="12" md="6">
<Input id="exact-input" name="exact-input" bsSize="sm" placeholder="Mobile"/>
</Col>
</FormGroup>
<FormGroup row>
<Col md="6">
<Input type="select" name="selectSm" id="SelectLm" bsSize="sm">
<option value="0">Location</option>
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</Input>
</Col>
<Col xs="12" md="6">
<Input id="exact-input" name="exact-input" bsSize="sm" placeholder="Exact Location"/>
</Col>
</FormGroup>
<FormGroup row>
<Col md="6">
<FormGroup>
<Input type="textarea" name="textarea-input" bsSize="sm" id="textarea-input" rows="6"
placeholder="Outlet Address" />
</FormGroup>
<FormGroup row>
<Col md="4">
<FormGroup><Button size="sm" color="dark" className="btn-pill">Cordinates</Button></FormGroup>
</Col>
<Col md="8">
<FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Latitude" /></FormGroup>
<FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Longitude" /></FormGroup>
</Col>
</FormGroup>
</Col>
<Col md="6">
<Card>
<CardBody>
<FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Contact Name" /></FormGroup>
<FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Phone" /></FormGroup>
<FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Email" /></FormGroup>
<FormGroup><Input type="text" id="text-input" name="text-input" bsSize="sm" placeholder="Designation" /></FormGroup>
</CardBody>
</Card>
</Col>
</FormGroup>
</Form>
</CardBody>
<CardFooter>
<div className="card-header-actions">
<Button type="submit" size="sm" color="dark"><i className="fa fa-dot-circle-o"></i> Create</Button>
</div>
</CardFooter>
</Card>
</Col>
</Row>
</div>
);
}
}
export default data;
i am getting OVER_QUERY_LIMIT error
thanks in advance
I am using create-react-app or my project. I created a form field where I store the data into the state. I would like to send the data as an email, and I'm lost on how to do so.
One of the problems is using create-react-app, I'm not sure where to find my router or server page in node.
Any help would be greatly appreciated.
import React, { Component } from 'react';
import { Button, Col, Grid, Row, Form, FormGroup, FormControl,
ControlLabel, Checkbox } from 'react-bootstrap';
export class Contact extends Component {
constructor(props) {
super(props);
this.state = {
name: "",
email: "",
message: ""
}
}
onChange = (e) => {
const state = this.state;
state[e.target.name] = e.target.value;
this.setState(state);
}
onSubmit = (e) => {
e.preventDefault();
const { name, email, message } = this.state;
}
render() {
const { name, email, message } = this.state;
return(
<div>
<Grid>
<Row id="contactForm">
<Col xs={2}>
</Col>
<Col xs={8}>
<Form horizontal onSubmit={this.onSubmit}>
<FormGroup >
<Col componentClass={ControlLabel} sm={2}>
Name
</Col>
<Col sm={10}>
<FormControl required value={name} name="name" type="name"
placeholder="Name" onChange={this.onChange} />
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<Col componentClass={ControlLabel} sm={2}>
Email
</Col>
<Col sm={10}>
<FormControl required value={email} name="email" type="email"
placeholder="Email" onChange={this.onChange}/>
</Col>
</FormGroup>
<FormGroup>
<Col componentClass={ControlLabel} bsSize="lg" sm={2}>
Message
</Col>
<Col sm={10}>
<FormControl required value={message} name="message" componentClass="textarea" style={{ height: 200 }}
type="message" placeholder="Insert message here" onChange={this.onChange}/>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Checkbox>Flag as important</Checkbox>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={2} sm={10}>
<Button type="submit">
Send
</Button>
</Col>
</FormGroup>
</Form>
</Col>
<Col xs={2}>
</Col>
</Row>
</Grid>
</div>
)
}
}
Short answer is that You cannot send mail from the client. You will need to have a server to do so. If you have an api service that your React is consuming from, then it is very possible from there.
Below is the code I have so far, my state isn't working as expected with a bit complex object, I was able to work with a simple object with no nested objects in my state and its working as expected.
state assignment works fine if I don't use personalInfo or contactInfo inside the customer object and used all the properties and create simple customer object
import React, {PropTypes} from 'react';
import {Grid,Row,Col,Button,Label} from 'react-bootstrap';
import {connect} from 'react-redux';
import * as customerActions from '../../actions/customerActions';
import {bindActionCreators} from 'redux';
class AddCustomer extends React.Component{
constructor(props , context){
super(props , context);
this.state={
customer:{
personalInfo:{
firstName:"",
lastName:"",
dob:"",
ssn:""
},
contactInfo:{
address:"",
addressLine2:"",
city:"",
state:"",
zip:"",
phoneNumber:"",
emailAddress:""
}
}
};
this.handleChange = this.handleChange.bind(this);
this.onClickCancel = this.onClickCancel.bind(this);
this.onClickSave = this.onClickSave.bind(this);
}
handleChange(event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
const name = target.name;
this.setState({
customer: {
personalInfo:{
},
contactInfo:{
},
...this.state.customer,
[name]: value
}
});
console.log(this.state.customer);
}
onClickCancel(){
}
onClickSave(){
this.props.actions.createCustomer(this.state.customer);
}
render() {
return (
<div className="container-fluid">
<Grid>
<Row className="show-grid">
<Col xs={10} md={10}><b>ADD A LEAD</b></Col>
<Col xs={2} md={2}>
<Button>×</Button>
</Col>
</Row>
<Row className="show-grid">
<Col xs={12} md={12}>
<hr/>
</Col>
</Row>
<p><b>Personal Information</b></p>
<br/>
<Row className="show-grid">
<Col xs={6} md={6}>
<Row><Label>First Name*</Label></Row>
<Row><input name="personalInfo.firstName" type="text" value={this.state.customer.personalInfo.firstName} onChange={this.handleChange} required="true"/></Row>
</Col>
<Col xs={6} md={6}>
<Row><Label>Last Name*</Label></Row>
<Row><input name="personalInfo.lastName" type="text" value={this.state.customer.personalInfo.lastName} onChange={this.handleChange} required="true"/></Row>
</Col>
</Row>
<br/>
<Row className="show-grid">
<Col xs={2} md={2}>
<Row><Label>Date of Birth*</Label></Row>
<Row><input name="personalInfo.dob" type="text" value={this.state.customer.personalInfo.dob} onChange={this.handleChange} required="true"/></Row>
</Col>
<Col xs={2} md={2}>
<Row><Label>SSN*</Label></Row>
<Row><input name="personalInfo.ssn" type="text" value={this.state.customer.personalInfo.ssn} onChange={this.handleChange} required="true"/></Row>
</Col>
</Row>
<br/>
<p><b>Contact Information</b></p>
<br/>
<Row className="show-grid">
<Col xs={6} md={6}>
<Row><Label>Address</Label></Row>
<Row><input name="contactInfo.address" type="text" value={this.state.customer.contactInfo.address} onChange={this.handleChange}/></Row>
</Col>
<Col xs={6} md={6}>
<Row><Label>Address Line 2</Label></Row>
<Row><input name="contactInfo.addressLine2" type="text" value={this.state.customer.contactInfo.addressLine2} onChange={this.handleChange}/></Row>
</Col>
</Row>
<br/>
<Row className="show-grid">
<Col xs={2} md={2}>
<Row><Label>City</Label></Row>
<Row><input name="contactInfo.city" type="text" value={this.state.customer.contactInfo.city} onChange={this.handleChange}/></Row>
</Col>
<Col xs={2} md={2}>
<Row><Label>State</Label></Row>
<Row><input name="contactInfo.state" type="text" value={this.state.customer.contactInfo.state} onChange={this.handleChange}/></Row>
</Col>
<Col xs={2} md={2}>
<Row><Label>Zip</Label></Row>
<Row><input name="contactInfo.zip" type="text" value={this.state.customer.contactInfo.zip} onChange={this.handleChange}/></Row>
</Col>
</Row>
<br/>
<Row className="show-grid">
<Col xs={4} md={4}>
<Row><Label>Phone Number</Label></Row>
<Row><input name="contactInfo.phoneNumber" type="text" value={this.state.customer.contactInfo.phoneNumber} onChange={this.handleChange}/></Row>
</Col>
<Col xs={4} md={4}>
<Row><Label>Email Address</Label></Row>
<Row><input name="contactInfo.emailAddress" type="text" value={this.state.customer.contactInfo.emailAddress} onChange={this.handleChange}/></Row>
</Col>
</Row>
<br/>
<Row className="show-grid">
<hr/>
</Row>
<Row className="show-grid">
<input className="pull-right" type="submit" onClick={this.onClickCancel} value="Cancel"/>
<input className="pull-right" type="submit" bsStyle="primary" onClick={this.onClickSave} value="Add"/>
</Row>
</Grid>
</div>
);
}
}
AddCustomer.propTypes={
actions:PropTypes.object.isRequired,
customer:PropTypes.array.isRequired
};
function mapStateToProps(state, ownProps) {
return{
customer:state.customer
};
}
function mapDispatchToProps(dispatch) {
return{
actions: bindActionCreators(customerActions,dispatch)
};
}
export default connect(mapStateToProps,mapDispatchToProps)(AddCustomer);
I'm not sure what's the unxepcted result do you receive, but I gues you may try something like this:
handleChange(type, name, event) {
const target = event.target;
const value = target.type === 'checkbox' ? target.checked : target.value;
this.setState({
customer: {
...this.state.customer,
[type]:{
...this.state.customer[type],
[name]: value
}
}
});
console.log(this.state.customer);
}
...
render() {
...
<Row><input type="text" value={this.state.customer.personalInfo.firstName} onChange={this.handleChange.bind(this, 'personalInfo', 'firstName')} required="true"/></Row>
...
<Row><input type="text" value={this.state.customer.contactInfo.address} onChange={this.handleChange.bind(this, 'contactInfo', 'address')}/></Row>
...
}
I have a login model with the following login function:
login() {
console.log("Hello. It's Me")
axios.post('https://crossorigin.me/http://requestb.in/w21igbw2', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
//this.setState({ showModal: false });
})
.catch(function (error) {
console.log(error);
});
}
this is working fine, so how I do change this to send the actual data from the login form instead of just the hardcoded info in the function. The input in the login model this is what the full form looks like:
<form>
<FormGroup >
<Row>
<Col md={12}>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Email"/>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Password"/>
</Col>
</Row>
<Row className='top-space'>
<Col md={5} mdOffset={1}>
<Checkbox className="checkbox-login"> Remember Me </Checkbox>
</Col>
<Col md={6} className='forgot-password'>
Forgot Password
</Col>
</Row>
<Row className='top-space'>
<Col md={10} mdOffset={1}>
<Button onClick={this.login} bsStyle="btn btn-black btn-block">Login</Button>
</Col>
</Row>
</FormGroup>
</form>
You can keep track of inputs in you state and when you fire API read the values from the state.
constructor(){
super()
this.state = {
email : null,
password : null,
}
onChangeEmail(){
this.setState({email: e.target.value});
}
onChangePassword(){
this.setState({password: e.target.value});
}
login(){
//api call with state values for id and pass
}
render(){
<form>
<FormGroup >
<Row>
<Col md={12}>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Email" onChange={this.onChangeEmail}/>
<input className="col-md-10 col-md-offset-1 top-space fat-input" placeholder="Password" onChange={this.onChangePassword}/>
</Col>
</Row>
<Row className='top-space'>
<Col md={5} mdOffset={1}>
<Checkbox className="checkbox-login"> Remember Me </Checkbox>
</Col>
<Col md={6} className='forgot-password'>
Forgot Password
</Col>
</Row>
<Row className='top-space'>
<Col md={10} mdOffset={1}>
<Button onClick={this.login} bsStyle="btn btn-black btn-block">Login</Button>
</Col>
</Row>
</FormGroup>
</form>
}
}
P.S: I would strongly suggest using redux with react and using redux-form to handle you forms. It has been the best way I have found till now to handle forms in react-redux app. You can check it out here.