Material-UI如何获得SelectField的值在const内

-1

实际上，我的Drawer有几个字段，包括SelectField，但我坚持获取字段的值和onChange部分。这里是我的代码：Material-UI如何获得SelectField的值在const内

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;

来源

2017-09-06 Deee

DEEE，你注意到我一直有做您文章的编辑？我们喜欢简洁的帖子，我们不鼓励乞讨和恳求。很明显，你需要帮助，所以你不需要添加“请帮助我”，“我是新手”，“我需要你的帮助guyz”等。这是分心和不必要的。你会不会把这种事情添加到你未来的问题中？ – halfer

对不起，先生，但我只是想取悦读者，并给予我最尊重，我可以。感谢您的努力和建议。我真的很感激这一切。 – Deee

这很好，但我们宁愿你没有那样做。谢谢。 – halfer

您创建一个简单的功能，你需要的是一个阵营组件：

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

基本上，你现在可以访问完整的生命周期做出反应。当前值现在保存在组件的状态中。

来源

2017-09-06 04:11:44 klugjo

这

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

来源

2017-09-06 04:20:00 HarshMakadia

我应该把它放在const里面吗？或者我应该修改我的代码并创建一个班级。 – Deee

没有必要像这样创建一个类。在render（）方法开始之前，你可以在你的构造函数之后放置handleChanges函数，它会正常工作。 – HarshMakadia

Material-UI如何获得SelectField的值在const内

回答

相关问题