我如何将数组从选择html元素组件传递到数组中具有不同值的两个文本组件

Question

I'm trying to get the price value from the select element after I've selected a value. eg stock-description:"Numbers Invo Qt", Selling-Price:"100". But I've written the code below and when i run it i get this error Selling-Price returns "undefined".

So I would really appreciate it you could help me because I've search the internet the whole day looking for help.

import React, { Component } from 'react';
import _ from 'lodash';

const ITEMS = [
  { name: 'initial', text: 'Select Items', value: '' },
  { name: 'centos', text: 'Invo qt', value: 'Numbers Invo qt', price: "100" },
  { name: 'ubuntu', text: 'Invo xp', value: 'Numbers Invo xp', price: "180" },
  ]
  const SelectComponent = (props) => (
    <select name={props.name}
     onChange={props.handleSelect}
      >
      {_.map(props.items, (item, i) => 
        <Option
            key={i}
        name={item.name}
        value={item.value}
        text={item.text}
        price={item.price}
        handleSelect={props.handleSelect}
      />
)}
</select>
);

const Option = (props) => (
<option 
value={props.value}
>{props.text}</option>
)

export default class CustomerComboBox extends Component {
constructor() {
    super()
    this.state = {
      selected: '',
      selected_Price: ''
    }
    this.handleSelect = this.handleSelect.bind(this);
  }
  handleSelect(e) {
    e.preventDefault();


    //console.log(e.target);

    this.setState({
        selected: e.target.value,
        selected_Price: e.target.price,
    })
    document.getElementById('stock-description').value = e.target.value;
    document.getElementById('stock-price').value = e.target.price;

  }

render() { 
    return ( 
        <div>
            <div>
                <SelectComponent 
                name="testSelect" 
                items={ITEMS}
                price={ITEMS.price}
                handleSelect={this.handleSelect}
                />
            </div>
            <p>Stock Description</p>
            <input id='stock-description' placeholder='Item Description'></input>
            <p>Stock Price</p>
            <input id='stock-price' placeholder='Selling Price'></input>
        </div>
     );
}
}

Answer 1

Price won't get passed like that. My advice would be, to onChange pass the entire object.

onChange={ (e) => props.handleSelect(props.items[e.target.value]) }