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

Question

我目前有一个带有 select 下拉列表的 React Material 表单，我在其中映射了一个对象数组并将名称字段显示为每个选项。我目前已将选项的值属性设置为对象的名称 (cpuParent.name)。但是，同一个对象还有一个瓦数字段 (cpuParent.wattage)，我也需要它的值。有没有一种方法可以从同一个下拉字段中获取对象的名称和瓦数？我已经复制并粘贴了下面代码的相关片段 - 该组件是一个 class 组件：

在 class 组件内，但在 render 方法之外：

constructor(props) {
    super(props);

    this.state = {
        calculator: {
            cpuParent: '',
            cpuChild: 0
        }
    }
}

handleChange = name => event => {
    this.setState({
        calculator: {
            ...this.state.calculator,
            [name]: event.target.value
        }
    });
};

渲染方法内部：

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

Answer 1

您无法同时获得名称和瓦数值，但它们是一个技巧：您可以将名称和瓦数与选项值中的特定字符连接起来，例如 value={cpuParent.name + "_" + cpuParent.wattage } 并通过拆分来读取 handleChange 事件函数中的值让value = event.target.value.split('_')

Answer 2

您只需将选项值更改为整个对象即可获得整个对象

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

现在标签将显示名称，但值将包含整个对象项目。您可以访问您需要的任何值。

您可以使用

访问属性

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

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

Get multiple values from the same select dropdown form field in React

javascript

reactjs

react-material