Как получить дополнительные данные из выбора вариантов в приложении React / Typescript

Question

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

Например, если пользователь выбирает первую опцию ниже, я хочузахватить "poloniex", а также базовый ключ "USDC".

Сначала я попробовал использовать это:

{exchanges.map((exchange, i) =>
  (<option key={i} value={exchange.exchange} base={exchange.quote}>
    {capFirst(exchange.exchange)} ({exchange.quote}) ${exchange.price_quote}
  </option>))}

Однако я получаю сообщение об ошибке, что base не существует, однако не могу ли я добавить какой-либо атрибут в опцию?Возможно, нет, если это в JSX?Также data не работал.

Type '{children: string [];ключ: номер;значение: строка;база: строка;} 'нельзя назначить типу «DetailHTMLProps, HTMLOptionElement>».Свойство «base» не существует для типа «DetailHTMLProps, HTMLOptionElement>». Ts (2322)

Другой способ, которым я пытался, - это получить ключ индекса для выбранной опции, однако следующий код выдает key = null.

Ниже target.value даст мне его значение, но мне также нужна базовая цитата.

@bind
handleExchangeSelect(event: React.FormEvent<HTMLSelectElement>) {
  const { exchanges } = this.props;
  const target = event.target as HTMLSelectElement;
  console.log('target', target);
  const exchange = target.value;
  const key = target.getAttribute('key');
  console.log('exchange', exchange);
  console.log('key', key);
  // if (key) {
  //   console.log(exchanges[Number(key)]);
  // }
  this.setState({
    exchange,
    // exchange_base: base ? base : ''
  });
}

Answer 1

Чтобы решить эту проблему, можно создать собственный компонент выбора, который может выглядеть следующим образом:

class ExchangeSelect extends Component {
    handleSelect = event => {
        const {exchanges, onSelect} = this.props;
        const selected = exchanges.find(exchange => exchange.exchange === event.target.value);
        onSelect(selected);
    };

    render() {
        const {exchanges} = this.props;

        return (
            <select onChange={this.handleSelect}>
                {exchanges.map(exchange => (
                    <option key={exchange.exchange} value={exchange.exchange}>
                        {exchange.exchange} ({exchange.quote}) ${exchange.price_quote}
                    </option>
                ))}
            </select>
        );
    }
}

Если exchanges представляет собой список объектов обмена, вы можете использовать его следующим образом:

const exchanges = [
    {exchange: 'poloniex', quote: 'USDC', price_quote: '0.42'},
    {exchange: 'bitibu', quote: 'USDT', price_quote: '0.666'},
    {exchange: 'bittrex', quote: 'USDT', price_quote: '0.21'},
];

В render ():

<ExchangeSelect 
    exchanges={exchanges} 
    onSelect={exchange => console.log(exchange.quote)} 
/>

Live Пример:

Answer 2

Я надеюсь на более очевидный, более чистый способ, но я нашел это, и оно работает:

https://reactjs.org/docs/forms.html

Примечание

Вы можете передать массив в атрибут value, что позволит вам выбрать несколько опций в теге select:

<select multiple={true} value={['B', 'C']}>

Решение в моем приложении

Опции выбора

{exchanges.map((exchange, i) =>
  (<option key={i} value={[exchange.exchange, exchange.quote]}>
    {capFirst(exchange.exchange)} ({exchange.quote}) ${exchange.price_quote}
  </option>))}

Обработчик выбора

@bind
handleExchangeSelect(event: React.FormEvent<HTMLSelectElement>) {
  const target = event.target as HTMLSelectElement;
  const exchangeValues = target.value.split(',');
  const exchange = exchangeValues[0];
  const exchange_base = exchangeValues[1];
  console.log('exchange', exchange);
  console.log('exchange_base', exchange_base);
  this.setState({
    exchange,
    exchange_base
  });
}

Это дает мне то, что я хотел:

{ 
  exchange: 'gdax',
  exchange_base: 'USD'
}