javascript - 如何从 React / Typescript 应用程序中的选择选项中获取附加数据
问题描述
我有一系列交易所,一旦用户选择了一个交易所,我想同时使用交易所的名称和基本报价。
例如,如果用户选择下面的第一个选项,我想捕获"poloniex"
以及 base 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 中,也许不是?也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 : ''
});
}
解决方案
我希望有一种更明显,更清洁的方式,但我发现了这个并且它有效:
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'
}
推荐阅读
- c - MISRA-C 2012 规则 10.8 查询
- apache-spark - 来自 spark-sklearn 的 GridSearchCV 的 best_score_ 参数不适用于 0.2.3 版
- algorithm - 广度优先搜索时是否需要区分3个状态字段
- analytics - 衡量使用了哪些 Alexa 话语
- c# - 无法绑定到“menuList”,因为它不是“树视图”的已知属性
- python - 如何在 matplotlib 图形上循环显示颜色和线条样式?
- typescript - 在 TypeScript 中使用映射类型来限制方法类型
- regex - 如何防止附加信息被合并到这个正则表达式中?
- string - 关于 UWP 中字符串的 UDP 套接字
- spring - Spring Cloud Stream 中的事务