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

【问题标题】：How to obtain additional data from select options choice in React / Typescript app如何从 React / Typescript 应用程序中的选择选项中获取附加数据
【发布时间】：2019-02-28 19:08:32
【问题描述】：

我有一系列交易所，一旦用户选择了交易所，我想同时使用交易所的名称和基本报价。

例如，如果用户选择下面的第一个选项，我想捕获"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 也不起作用。

类型'{孩子：字符串[];键：数字；值：字符串；基数：字符串； }' 不可分配给类型 'DetailedHTMLProps, HTMLOptionElement>'。 'DetailedHTMLProps, HTMLOptionElement>'.ts(2322)
类型不存在属性'base'

我尝试的另一种方法是获取所选选项的索引键，但是下面的代码会生成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 : ''
  });
}

【问题讨论】：

使用 react 不需要将数据编码到 DOM 中（很少有例外）。向 DOM 元素添加任意属性也违反了 HTML 标准。 base 不是 <option> 元素的有效属性。组件可以在内部保存所有需要的数据。
@trixn 你能发布你的例子吗？我找到了一种方法来实现这一点，但似乎应该有更好更直接的方法。

标签： javascript reactjs typescript drop-down-menu select-options

【解决方案1】：

我希望有一种更明显、更清洁的方式，但我发现了这个并且它有效：

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

【讨论】：

【解决方案2】：

解决这个问题的反应方法是创建一个自己的选择组件，如下所示：

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'},
];

在渲染（）中：

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

现场示例：

【讨论】：