Material-UI const内のSelectFieldの値を取得する方法

Question

実際には、私のDrawerにはSelectFieldを含むいくつかのフィールドがありますが、Fieldの値とonChange部分を取得することに固執しました。そしてここに私のコードは次のとおりです。

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

あなたは、簡単な関数を作成し、何が必要リアクトコンポーネントです：

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

は基本的にあなたが今フルリアクトライフサイクル全体へのアクセス権を持っています。現在の値がコンポーネントの状態に保存されるようになりました。

Answer 2

ここでは、ここ

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

ですが書かれるべき変更イベント関数ハンドルです：

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