Meteor/Reactのselectオプションから値を取得する方法はありますか？

Question

webappを実装しましたMeteor/Reactいくつかの機能があります。 次に、selectオプションから値が必要な関数が1つあります。 setStateを使用するいくつかの例を参照してください。しかし、私が使ったコードは違っています。 いくつかの関数/方法を使用しようとしましたが、更新値を取得できません。 このコードでは、day1Changed関数を使用して、選択値を更新して更新します。 次のコードから選択から値を取得するために私を助けてください：

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); 

Answer 1

あなたが怒鳴るスニペットのような選択オプションから値を取得することができますと

handleChange(name, e) { 
    let change = {} 
    change[name] = e.target.value 
    this.setState(change) 
    } 


<select className="ui dropdown" onClick={this.handleChange.bind(this, 'STATE_NAME_HERE')}> 
    <option value="1">Male</option> 
</select> 

このコードが動作するMeteor-React-SemanticUi