I would like to put “handleToggle()” function in my code.
When I put the function in my code there is an error “Cannot read property ‘checked’ of undefined”.
How can I accomplish this to work? (for “accompaid”)
Here’s my code:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Row, Col, FormGroup, ControlLabel, FormControl, Checkbox, Button } from 'react-bootstrap';
import { Meteor } from 'meteor/meteor';
import validate from '../modules/validate';
class ContributionEditor extends Component {
componentDidMount() {
const component = this;
validate(component.form, {
rules: {
salution: {
required: false,
},
firstname: {
required: true,
},
lastname: {
required: false,
},
sex: {
required: false,
},
age: {
required: false,
},
province: {
required: false,
},
bhumdharmlevel: {
required: false,
},
accommodation: {
required: false,
},
accompaid: {
required: false,
},
},
messages: {
firstname: {
required: 'please input your firstname',
},
},
submitHandler() { component.handleSubmit(); },
});
}
handleToggle() {
this.accompaid.checked = !this.accompaid.checked;
}
handleSubmit() {
const { history } = this.props;
const existingContribution = this.props.contrib && this.props.contrib._id;
const methodToCall = existingContribution ? 'contributions.update' : 'contributions.insert';
const contrib = {
salution: this.salution.value.trim(),
firstname: this.firstname.value.trim(),
lastname: this.lastname.value.trim(),
sex: this.sex.value,
age: parseInt(this.age.value),
province: this.province.value.trim(),
bhumdharmlevel: this.bhumdharmlevel.value.trim(),
accommodation: Number(this.accommodation.value),
accompaid: Boolean(this.accompaid.value),
};
if (existingContribution) contrib._id = existingContribution;
Meteor.call(methodToCall, contrib, (error, contributionId) => {
if (error) {
console.log('danger');
} else {
const confirmation = existingContribution ? 'Contribution updated!' : 'Contribution added!';
this.form.reset();
console.log('success');
history.push(`/contributions`);
}
});
}
render() {
const { contrib } = this.props;
return (
<Row>
<Col xs={12} sm={6} md={5} lg={4}>
<form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
<FormGroup>
<ControlLabel>Salution</ControlLabel>
<input
type="text"
className="form-control"
name="salution"
ref={salution => (this.salution = salution)}
defaultValue={contrib && contrib.salution}
/>
</FormGroup>
<FormGroup>
<ControlLabel>First Name</ControlLabel>
<input
type="text"
className="form-control"
name="firstname"
ref={firstname => (this.firstname = firstname)}
defaultValue={contrib && contrib.firstname}
/>
</FormGroup>
<FormGroup>
<ControlLabel>Last Name</ControlLabel>
<input
type="text"
className="form-control"
name="lastname"
ref={lastname => (this.lastname = lastname)}
defaultValue={contrib && contrib.lastname}
/>
</FormGroup>
<FormGroup>
<ControlLabel>Sex</ControlLabel>
<FormControl componentClass="select" name="sex" inputRef={sex => (this.sex = sex)} defaultValue={contrib && contrib.sex}>
<option value="male">male</option>
<option value="female">female</option>
</FormControl>
</FormGroup>
<FormGroup>
<ControlLabel>Age</ControlLabel>
<input
type="number"
className="form-control"
name="age"
ref={age => (this.age = age)}
defaultValue={contrib && contrib.age}
/>
</FormGroup>
<FormGroup>
<ControlLabel>Province</ControlLabel>
<input
type="text"
className="form-control"
name="province"
ref={province => (this.province = province)}
defaultValue={contrib && contrib.province}
/>
</FormGroup>
<FormGroup>
<ControlLabel>Bhumdharmlevel</ControlLabel>
<FormControl componentClass="select" name="bhumdharmlevel" inputRef={bhumdharmlevel => (this.bhumdharmlevel = bhumdharmlevel)} defaultValue={contrib && contrib.bhumdharmlevel}>
<option value="first">first</option>
<option value="second">second</option>
<option value="third">third</option>
<option value="forth">forth</option>
<option value="fifth">fifth</option>
</FormControl>
</FormGroup>
<FormGroup>
<ControlLabel>Accommodation Paid</ControlLabel>
<input
type="number"
className="form-control"
name="accommodation"
ref={accommodation => (this.accommodation = accommodation)}
defaultValue={contrib && contrib.accommodation}
/>
</FormGroup>
<FormGroup>
<Checkbox readOnly name="accompaid" inputRef={accompaid => (this.accompaid = accompaid)} defaultChecked={contrib && contrib.accompaid} onChange={this.handleToggle}>
<span className="text">Already paid</span>
</Checkbox>
</FormGroup>
<Button type="submit" bsStyle="success">
{contrib && contrib._id ? 'Save' : 'Add'}
</Button>
</form>
</Col>
</Row>
);
}
}
ContributionEditor.defaultProps = {
contrib: { firstname: '' },
};
ContributionEditor.propTypes = {
contrib: PropTypes.object,
history: PropTypes.object.isRequired,
};
export default ContributionEditor;