Since I use the code from Meteor Chef because I can learn a lot from it.
Then I have one function which I need the value from select option.
I see some example to use setState. But the code is different.
I try to use some functions but I cannot get the update value.
Please help me to get the value from select from the following code:
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import { Table, Alert, Button, FormGroup, FormControl } from 'react-bootstrap';
import { Meteor } from 'meteor/meteor';
import { createContainer } from 'meteor/react-meteor-data';
import { Registers } from '../../api/registers';
const handleRemove = (registerId) => {
if (confirm('Are you sure? This is permanent!')) {
Meteor.call('registers.remove', registerId, (error) => {
if (error) {
console.log(error.reason, 'danger');
} else {
console.log('success');
}
});
}
};
const toggleChecked = (registerId, paid) => {
Meteor.call('registers.setChecked', registerId, !paid);
}
const day1Changed = (registerId) => {
console.log(this.day1.value);
Meteor.call('registers.day1Changed', registerId, this.day1.value);
}
const DSRegisters = ({ registers, totalCount, match, history }) => (
<div className="Registers">
<div className="page-header clearfix">
<br />
<br />
<h4 className="pull-left">Registration </h4> <h4>All user {totalCount} </h4>
<br />
<br />
<Link className="btn btn-success" to={`${match.url}/upload`}>Upload User</Link>
<Link className="btn btn-success pull-right" to={`${match.url}/new`}>Add</Link>
</div>
{registers.length ? <Table striped responsive>
<thead>
<tr>
<th>Item</th>
<th>Salution</th>
<th>First Name</th>
<th>Last Name</th>
<th>Gender</th>
<th>Age</th>
<th>Province</th>
<th>Bhumdharm</th>
<th>Amount</th>
<th>Paid</th>
<th>15/9/60</th>
<th>16/9/60</th>
<th>17/9/60</th>
<th>Accommodation</th>
<th>Remark</th>
<th>Updated</th>
<th>Created</th>
<th>User</th>
<th />
<th />
</tr>
</thead>
<tbody>
{registers.map(({ _id, gender, salution, firstname, lastname, province, bhumdharmlevel, age, amount, paid, day1, day2, day3, accommodation, remark, username, createdAt, updatedAt }, index) => (
<tr key={_id}>
<td>{index+1}</td>
<td>{salution}</td>
<td>{firstname}</td>
<td>{lastname}</td>
<td>{gender}</td>
<td>{age}</td>
<td>{province}</td>
<td>{bhumdharmlevel}</td>
<td>{amount}</td>
<td>
<input
type="checkbox"
readOnly
checked={paid}
onClick={() => toggleChecked(_id,paid)}
/>
</td>
<td>
<FormGroup>
<FormControl
componentClass="select"
name="day1"
inputRef={day1 => (this.day1 = day1)}
defaultValue={day1}
onChange={() => day1Changed(_id, day1)}>
<option value=""></option>
<option value="leave">Leave</option>
<option value="come">Come</option>
<option value="absense">Absense</option>
</FormControl>
</FormGroup>
</td>
<td>{day2}</td>
<td>{day3}</td>
<td>{accommodation}</td>
<td>{remark}</td>
<td>{updatedAt.getDate()}/{updatedAt.getMonth()+1}/{updatedAt.getFullYear()+543} {updatedAt.getHours()}:{(updatedAt.getMinutes()<10?'0':'')+updatedAt.getMinutes()}</td>
<td>{createdAt.getDate()}/{createdAt.getMonth()+1}/{createdAt.getFullYear()+543}</td>
<td>{username}</td>
<td>
<Button
bsStyle="primary"
onClick={() => history.push(`${match.url}/${_id}/edit`)}
block
>Edit</Button>
</td>
<td>
<Button
bsStyle="danger"
onClick={() => handleRemove(_id)}
block
>Delete</Button>
</td>
</tr>
))}
</tbody>
</Table> : <Alert bsStyle="warning">Nobody yet!</Alert>}
</div>
);
DSRegisters.propTypes = {
regs: PropTypes.object,
registers: PropTypes.arrayOf(PropTypes.object).isRequired,
totalCount: PropTypes.number.isRequired,
match: PropTypes.object.isRequired,
history: PropTypes.object.isRequired,
};
export default createContainer(() => {
const subscription = Meteor.subscribe('registers');
return {
registers: Registers.find({}, { sort: { createdAt: 1 } }).fetch(),
totalCount: Registers.find({}).count(),
};
}, DSRegisters);