我目前有一个带有选择下拉列表的React Material表单,其中我Map了一个对象数组,并将名称字段显示为每个选项。我目前已经将选项的value属性设置为对象的名称(cpuParent.name)。但是,同一个对象还有一个瓦数字段(cpuParent.wattage),我也需要它的值。有没有一种方法,我可以得到的名称和瓦数的对象从同一下拉字段?我已经复制并粘贴了下面代码的相关片段-该组件是一个类组件:
在类组件内,但在render方法外:
constructor(props) {
super(props);
this.state = {
calculator: {
cpuParent: '',
cpuChild: 0
}
}
}
handleChange = name => event => {
this.setState({
calculator: {
...this.state.calculator,
[name]: event.target.value
}
});
};
在render方法中:
// Destructure the state
const {calculator: {cpuParent, cpuChild}} = this.state;
// Destructure the props
const {classes, cpuParents} = this.props;
<FormControl className={classes.formControl}>
<NativeSelect
value={cpuParent}
onChange={this.handleChange('cpuParent')}
inputProps={{'aria-label': 'CPU Parent'}}
>
<option value="">Select Brand</option>
{
cpuParents.map(cpuParent => (
<option key={cpuParent.id} value={cpuParent.name}>
{cpuParent.name}
</option>
))
}
</NativeSelect>
</FormControl>
2条答案
按热度按时间km0tfn4u1#
你不能同时得到名字和功率值,但他们是一个技巧:你可以在像
value={cpuParent.name + "_" + cpuParent.wattage }
这样的选项值中将名称和瓦特数与特定字符连接起来,并通过像letvalue = event.target.value.split('_')
这样的拆分来读取handleChange
事件函数中的值c3frrgcw2#
你可以得到整个对象只是改变你的选项值为整个对象
现在标签将显示名称,但值将保存整个对象项。你可以访问任何你需要的值。
您可以使用