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

Question

在 select 编辑了一个值后，我试图从 select 元素中获取价格值。例如股票描述："Numbers Invo Qt"，销售价格：“100”。但是我写了下面的代码，当我运行它时，我得到了这个错误 Selling-Price returns "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]) }

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

how do i pass array from select html element component to two text components that have different values in the array

javascript

jsx

reactjs