Question

我正在使用React Material Ui 1.0.0-beta.34，我遇到了Select组件的问题。我试图为onChange事件处理程序设置其他参数，但看起来只允许传递事件参数。这就是我的自定义选择组件的样子。

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Input, { InputLabel } from 'material-ui/Input';
import { MenuItem } from 'material-ui/Menu';
import { FormControl, FormHelperText } from 'material-ui/Form';
import Select from 'material-ui/Select';

class CarSelect extends Component {

    render() {
        const {classes, value, cars, onSelectChange} = this.props;

        return(
            <FormControl>
                <InputLabel htmlFor="car-helper">Car</InputLabel>
                <Select
                    value={value}
                    onChange={onSelectChange}
                    input={<Input name="car" id=car-helper />}
                >
                    {cars.map(car => {
                        return (
                            <MenuItem key={car.carId} value={car.carId}>{car.registration}</MenuItem>
                        )
                    })}
                </Select>
                <FormHelperText>This is required!</FormHelperText>
            </FormControl>
        )
    }
}

export default withStyles(styles)(CarSelect);

我的容器看起来像这样：

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as carActions from '../../../redux/aircraft/carActions';
import { withStyles } from 'material-ui/styles';

class Form extends Component {
    constructor(props, context) {
        super(props, context)

        this.state = {
            form: {
                car: {
                    carId: ''
                }
            }
        }

        this.handleSelectChange = this.handleSelectChange.bind(this);
    }

    componentDidMount() {
        if(this.props.cars.length == 0) {
            this.props.cars.loadAll();
        }
    }

    handleSelectChange = (event) => {
        let target = event.target;
        let report = Object.assign({}, this.state.report);
        report[event.target.name][event.target.name + 'Id'] = event.target.value;
        return this.setState({report: report})
    }

    render() {
        const { cars } = this.props;
        return (
            <CarSelect value={this.state.form.car.carId} cars={cars} onSelectChange={handleSelectChange}  />
        );
    }
}

function mapStateToProps(state, ownProps) {
    return {
        cars: state.Car.cars
    }
}

function mapDispatchToProps(dispatch) {
    return {
        cars: bindActionCreators(carActions, dispatch)
    };
}

export default withStyles(styles) (connect(mapStateToProps, mapDispatchToProps)(Form));

所以我尝试将其他参数传递给我的handleSelectChange函数，但我不知道怎样，因为Material UI 1.0 Select组件回调onChange只能通过事件对象。有人知道如何传递其他参数吗？

Answer 1

将扩展的lambda函数传递给prop：

handleSelectChange = (event, carId) => {
    // do things with event and carId
}

render() {
    const { cars } = this.props;
    return (
        <CarSelect
            value={this.state.form.car.carId}
            cars={cars}
            onSelectChange={(evt) => handleSelectChange(evt, this.state.form.car.carId)} 
        />
    );
}

React Material UI 1.0选择多个参数onChange

1 个答案: