How can I get the value from select option from Meteor/React?


#1

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 &nbsp;</h4> <h4>All user &nbsp;{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);