Material-UI如何在const中获取SelectField的值

Question

Actually, my Drawer has a few fields including SelectField but I stuck on getting the value and the onChange part of the Field. and here's my code:

 const DrawerCargoAddItem = (props) => {
  let { navDrawerOpen } = props;

  return (
    <Drawer docked={true} width={500} open={navDrawerOpen}>
         <div style={styles.logo}>
             Fleetcat Web
         </div>
         <div>
            <PageBase title={<Link to="dashboard"><img src="./images/fleetcat.png"/></Link>} style={page}>
                <SelectField
                   floatingLabelText="Category"
                   fullWidth={true}
                   value="">
                 <MenuItem key={0} primaryText="Food and Beverages"/>
                 <MenuItem key={1} primaryText="Medium"/>
                 <MenuItem key={2} primaryText="Large"/>
                 </SelectField>

             <Paper style={papers} zDepth={5}  >
                 <Link to="dashboard">
                     <FlatButton label="Tap to add Items" style={flatbutton}
                       onClick={() => { alert('foo');
                       console.log("Success");}}/> 
                 </Link>
             </Paper>
           </PageBase>
        </div>
    </Drawer>
  );
};

DrawerCargoAddItem.propTypes = {
  navDrawerOpen: PropTypes.bool,
  menus: PropTypes.array,
  username: PropTypes.string,
};

export default DrawerCargoAddItem;

Answer 1

You create a simple function and what you need is a React Component:

import React from 'react';

export default class DrawerCargoAddItem extends React.Component {

state = {
    value: 0
};

handleChange = (event, index, value) => this.setState({value});

render() {
    let {navDrawerOpen} = this.props;
    const {value} = this.state

    return (
        <Drawer docked={true} width={500} open={navDrawerOpen}>
            <div style={styles.logo}>
                Fleetcat Web
            </div>
            <div>
                <PageBase
                    title={< Link to = "dashboard" > <img src="./images/fleetcat.png"/> < /Link>}
                    style={page}>
                    <SelectField
                        floatingLabelText="Category"
                        fullWidth={true}
                        value={value}
                        onChange={this.handleChange}>
                        <MenuItem value={0} key={0} primaryText="Food and Beverages"/>
                        <MenuItem value={1} key={1} primaryText="Medium"/>
                        <MenuItem value={2} key={2} primaryText="Large"/>
                    </SelectField>
                    <Paper style={papers} zDepth={5}>
                        <Link to="dashboard">
                            <FlatButton
                                label="Tap to add Items"
                                style={flatbutton}
                                onClick={() => {
                                alert('foo');
                                console.log("Success");
                            }}/>
                        </Link>
                    </Paper>
                </PageBase>
            </div>
        </Drawer>
    );
}
}

Basically you now have access to the full React lifecycle. The current value is now saved in the component's state.

Answer 2

Here it is

<SelectField  floatingLabelText="Category"
     fullWidth={true}
     value=""
     onChange={this.handleChanges}>
     <MenuItem key={0} value="Food and Beverages" primaryText="Food"/>
     <MenuItem key={1} value="Medium" primaryText="Medium"/>
     <MenuItem key={2} value="Large" primaryText="Large"/>
</SelectField>

here is handle change event function which should be written:

handleChanges = (e, index, value) => {
    alert(value);
}

Answer 3

For me worked this syntax : onBlur={event => { handleChange(event) } }

<Autocomplete
      id="size-small-standard"
      size="small"
      options={lOrigens}
      defaultValue={{ title: props.value }} 
      getOptionLabel={option => option.title}
      onBlur={e => { handleChange(e, props, { setChanging: setCurrentChangingItem1, i}) }}
      renderInput={params => (
            <TextField
                  {...params}
                  variant="standard"
                  label="Origens1"
                  placeholder="Origens2"
                  fullWidth
            />
      )}
/>

And to access the value: event.target.value