javascript - 如何从 React/Typescript 应用程序中的选择选项获取附加数据

Question

我有一系列交易所，一旦用户选择了一个交易所，我想使用该交易所的名称及其基本报价。

例如，如果用户选择下面的第一个选项，我想捕获 "poloniex" 以及基本 key "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 中，也许不是？而且数据也不起作用。

Type '{ children: string[]; key: number; value: string; base: string; }' is not assignable to type 'DetailedHTMLProps, HTMLOptionElement>'. Property 'base' does not exist on type 'DetailedHTMLProps, 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

我希望有一种更明显、更干净的方法，但我发现了这个并且它有效:

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

Note

You can pass an array into the value attribute, allowing you to select multiple options in a select tag:

<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'
}