Question

我已经通过 Meteor / React 实现了一些功能的webapp。然后我有一个函数，我需要select选项的值。我看到一些使用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

您可以从选择选项中获取值，例如snippet bellow：

handleChange(name, e) {
    this.setState([name]: e.target.value)
  }


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

此代码适用于Meteor-React-SemanticUi

如何从Meteor / React的select选项中获取值？

1 个答案: