我如何將數組從選擇html元素組件傳遞到數組中具有不同值的兩個文本組件

Question

選擇值后，我試圖從select元素中獲取價格值。 例如，股票說明：“ Numbers Invo Qt”，銷售價格：“ 100”。 但是我已經編寫了下面的代碼，當我運行它時，出現此錯誤Selling-Price返回“ undefined”。

因此，我非常感謝您能為我提供幫助，因為我整天都在互聯網上尋找幫助。

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

價格不會像那樣過去。 我的建議是，要onChange傳遞整個對象。

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