Получить несколько значений из одного поля выбора в React - PullRequest
Новая
       10

Получить несколько значений из одного поля выбора в React

0 голосов
/ 29 марта 2020

В настоящее время у меня есть форма React Material с выпадающим списком, в которой я сопоставляю массив объектов и отображаю поле имени в качестве каждой опции. В настоящее время я установил для атрибута значения параметра имя объекта (cpuParent.name). Тем не менее, тот же объект также имеет поле мощности (cpuParent.wattage), значение которого мне также нужно. Есть ли способ получить как имя, так и мощность объекта из одного и того же выпадающего поля? Я скопировал и вставил соответствующие фрагменты моего кода ниже - компонент является компонентом класса:

Внутри компонента класса, но вне метода рендеринга: 

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>

Ответы [ 2 ]

1 голос
/ 29 марта 2020

Вы можете получить весь объект, просто измените значение вашего параметра на весь объект 

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

Теперь в метке будет отображаться имя, но значение будет содержать весь объект объекта. вы можете получить доступ к любому значению, которое вам нужно.

И вы можете получить доступ к атрибутам, используя 

  [name]: event.target.value['name']
  [name]: event.target.value['wattage']
1 голос
/ 29 марта 2020

Вы не можете получить значения и имени, и мощности, но это хитрость: вы можете объединить имя и мощность с определенным символом в значении параметра, например value={cpuParent.name + "_" + cpuParent.wattage }, и прочитать значения в handleChange функции события, разделив, как let value = event.target.value.split('_')

...