Mam tablicę wymiany, gdy użytkownik wybiera wymianę, chcę użyć zarówno nazwy wymiany, jak i jej cytat.

Na przykład, jeśli użytkownik wybiera pierwszą opcję poniżej, chcę przechwycić "poloniex", a także klucz podstawowy "USDC".

enter image description here

Najpierw próbowałem tego używać:

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

Jednak otrzymuję błąd, który base nie istnieje, jednak nie powinienem być w stanie dodać dowolnego atrybutu do opcji? Być może nie, jeśli jest w JSX? Również data nie działał.

Wpisz "{dzieci: ciąg []; Klucz: numer; Wartość: ciąg; podstawa: ciąg; } '' '' nie jest przypisany, aby wpisać "SzczegółyHtmlprops, Htmloptionelement>". Właściwość "Base" nie istnieje na wpisz "SzczegółowoThtmlprops, HtmloptionElement>". TS (2322)

Innym sposobem, w jaki próbuję, aby uzyskać klucz indeksu wybranego opcji, jednak kodeksem pracy wytwarza key = null.

Poniżej target.value da mi swoją wartość, ale potrzebuję również cytatu podstawowego.

@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 : ''
  });
}
0
Leon Gaban 28 luty 2019, 22:08

2 odpowiedzi

Najlepsza odpowiedź

Sposób reagowania do rozwiązania, który byłby stworzenie własnego wybranego komponentu, który mógłby wyglądać tak:

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>
        );
    }
}

Z exchanges jest lista obiektów wymiany, którą możesz użyć w ten sposób:

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)} 
/>

Przykład na żywo:

Edit 2z23n1n26n

1
trixn 28 luty 2019, 19:58

Mam nadzieję na bardziej oczywisty, czysty sposób, ale znalazłem to i działa:

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

Uwaga

Możesz przejść tablicę do atrybutu wartości, umożliwiając wybór wielu opcji w zaznaczeniu znacznika:

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

Rozwiązanie w mojej aplikacji

Opcje Wybierz

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

Wybór Handler

@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
  });
}

Daje mi to, czego chciałem:

{ 
  exchange: 'gdax',
  exchange_base: 'USD'
}
2
Community 20 czerwiec 2020, 09:12