javascript 从React中的同一个选择下拉表单字段中获取多个值

owfi6suc  于 2023-06-04  发布在  Java
关注(0)|答案(2)|浏览(158)

我目前有一个带有选择下拉列表的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>
km0tfn4u

km0tfn4u1#

你不能同时得到名字和功率值,但他们是一个技巧:你可以在像value={cpuParent.name + "_" + cpuParent.wattage }这样的选项值中将名称和瓦特数与特定字符连接起来,并通过像let value = event.target.value.split('_')这样的拆分来读取handleChange事件函数中的值

c3frrgcw

c3frrgcw2#

你可以得到整个对象只是改变你的选项值为整个对象

<option key={cpuParent.id} value={cpuParent}>
                    {cpuParent.name}
                </option>

现在标签将显示名称,但值将保存整个对象项。你可以访问任何你需要的值。
您可以使用

[name]: event.target.value['name']
  [name]: event.target.value['wattage']

相关问题