Javascript 物料界面如何获取常量中SelectField的值

实际上，我的抽屉有几个字段，包括SelectField，但我一直坚持获取字段的值和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;

const-drawercargoadItem=（道具）=>{
设{navDrapureRopen}=props；
返回(
Fleetcat网络
{alert（'foo'）；
console.log（“Success”）；}}/>
);
};
抽屉argoadditem.propTypes={
NavDrawerRopen:PropTypes.bool，
菜单：PropTypes.array，
用户名：PropTypes.string，
};
导出默认抽屉argoadditem；

创建一个简单的函数，需要的是一个React组件：

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

从“React”导入React；
导出默认类DroperCargoadItem扩展React.Component{
状态={
数值：0
};
handleChange=（事件、索引、值）=>this.setState（{value}）；
render（）{
设{navDrapureRopen}=this.props；
const{value}=this.state
返回(
Fleetcat网络
}
样式={page}>
{
警报（“foo”）；
控制台日志（“成功”）；
}}/>
);
}
}

---

基本上，您现在可以访问整个React生命周期。当前值现在保存在组件的状态中。

您创建了一个简单的函数，需要的是一个React组件：

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

从“React”导入React；
导出默认类DroperCargoadItem扩展React.Component{
状态={
数值：0
};
handleChange=（事件、索引、值）=>this.setState（{value}）；
render（）{
设{navDrapureRopen}=this.props；
const{value}=this.state
返回(
Fleetcat网络
}
样式={page}>
{
警报（“foo”）；
控制台日志（“成功”）；
}}/>
);
}
}

基本上，您现在可以访问整个React生命周期。当前值现在保存在组件的状态中。

在这里

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

给你

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

---

对我来说，使用这种语法：

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

option.title}
onBlur={e=>{handleChange（e，props，{setChanging:setCurrentChangingItem1，i}}}
renderInput={params=>(
)}
/>

---

为了访问值：

event.target.value

我使用了以下语法：

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

option.title}
onBlur={e=>{handleChange（e，props，{setChanging:setCurrentChangingItem1，i}}}
renderInput={params=>(
)}
/>

---

要访问该值：

event.target.value

是否应将其放入常量中？或者我应该修改我的代码并创建一个类。没有必要创建这样的类。在开始使用render（）方法之前，可以将handleChanges函数放在构造函数之后，这样它就可以正常工作了。我应该把它放在常量中吗？或者我应该修改我的代码并创建一个类。没有必要创建这样的类。在开始使用render（）方法之前，您可以将handleChanges函数放在构造函数之后，它会很好地工作。Deee，您注意到我一直在对您的帖子进行编辑吗？我们喜欢这里简洁的帖子，我们不鼓励乞讨和恳求。很明显，你需要帮助，所以你不需要加上“请帮助我”、“我是新来的”、“我需要你的帮助，伙计”等等。这会分散你的注意力，没有必要。请你不要在将来的问题中添加这种东西好吗？对不起，先生，我只是想取悦读者，尽我所能给予他们最大的尊重。谢谢你的努力和建议。我真的很感激这一切。那很好，但我们希望你不要那样做。谢谢。迪伊，你注意到我一直在编辑你的帖子吗？我们喜欢这里简洁的帖子，我们不鼓励乞讨和恳求。很明显，你需要帮助，所以你不需要加上“请帮助我”、“我是新来的”、“我需要你的帮助，伙计”等等。这会分散你的注意力，没有必要。请你不要在将来的问题中添加这种东西好吗？对不起，先生，我只是想取悦读者，尽我所能给予他们最大的尊重。谢谢你的努力和建议。我真的很感激这一切。那很好，但我们希望你不要那样做。谢谢