使用Select ReactJS進行onChange搜索

Question

我在執行類似操作時遇到問題，例如當用戶單擊“選擇標記”選項，然后轉換對將自動查找要查詢的數據。

例

當用戶選擇GBPAUD時 ，要價將為7429.4現在我使用var resultLast對的GBPAUD轉換為AUD。 之后，我創建了一個名為var conversionPairs = 'USD' + resultLast; 。 所以我安慰它，我得到了USDAUD 。 我的問題是如何在local.json上進行搜索過濾，以便我可以獲取USDAUD賣價 。

這是我的代碼。

非常感謝您的幫助。

反應代碼

   class PipValueCalculator extends Component {
          constructor(props) {
            super(props);
            this.state = {
              selectValue: ''
            };
            this.selectAccountCurrency = this.selectAccountCurrency.bind(this);
          }

          componentDidMount() {
            fetch('local.json')
              .then(data => data.json())
              .then(data => {
                this.setState({
                  Values: data
                });
              });
          }

          renderCalculatorOption(Values){
            return (
              <option data-symbol={Values.Symbol} value={Values.ask}>{Values.Symbol}</option>
            );
          }

          selectAccountCurrency(e){
            console.log('target-value', e.target[e.target.selectedIndex].getAttribute('data-symbol'));
            var sliceLast = e.target[e.target.selectedIndex].getAttribute('data-symbol');
            var resultLast = sliceLast.slice(3,6);
            console.log(resultLast);
            var conversionPairs = 'USD' + resultLast;
            console.log(conversionPairs);

            this.setState({
              selectValue: e.target.value,
              currentValuePrice : e.target[e.target.selectedIndex].getAttribute('data-symbol')
            });

          }


          render() {
            if(!this.state.Values) return <p>Loading...</p>;
            return (
              <div>
               <FormGroup className="col-sm-12 col-md-4" controlId="formControlsSelect">
                <FormControl className="calculator-option" componentClass="select" placeholder="select" ref="tester" value={this.state.selectValue} onChange={this.selectAccountCurrency} >
                  <option value="select">Currency Pairs</option>
                  {this.state.Values && this.state.Values.map(this.renderCalculatorOption, this)}
                </FormControl>
              </FormGroup>
<div className="calculator-group text-left">
          <p className="calculator__text" >Current Conversion Price: {this.state.currentValuePrice}</p>
          <p className="calculator__text" >Ask Price: {this.state.selectValue}</p>
        </div>
              </div>
            );
          }
        }

        export default PipValueCalculator;

Local.json

[
   {
      "Symbol":"GBPAUD",
      "ask":7429.4
   },
   {
      "Symbol":"USDAUD",
      "ask":5705.0
   }
]

Answer 1

由於數據是數組，因此可以使用Array.prototype.find來獲取與所選符號匹配的對象。 看起來像這樣：

const arr = [1,2,3]
arr.find( num => num > 2 ) // returns 3

基本上，您為它提供了一個函數，該函數將為數組中的每個項目調用以確定它是否是您想要的項目。 該函數必須為每個項目返回真值或假值。 返回true的第一項是從find()返回的內容。

為了使它與您的代碼一起使用，您需要更改一些內容：

// in the constructor
this.state = {
  selectValue: '',
  // set a default empty array value
  Values: []
}

// inside render, in <FormControl>
// just render the array directly and set the value to the symbol
// this simplifies things, since the symbol can find you the price
{
  this.state.Values.map( value =>
    <option value={value.Symbol}>
      {value.Symbol}
    </option>
  )
}

// in the event handler
// use the symbol value from the select menu to find the right object
// then pull the price from that object 
selectAccountCurrency(e) {
  const selectedOption = this.state.Values
    .find( value => value.Symbol === e.target.value )

  this.setState({
    selectValue: e.target.value,
    currentValuePrice: selectedOption
      ? selectedOption.ask
      : 0 // whatever your fallback is for the empty option
  })
}

您也可以考慮使用無大寫字母的方式來命名您的狀態鍵。 這使它們看起來像組件。 values或options （如選項標簽）讀起來都比Values好得多。 Symbol ，特別是考慮到它現在是保留字。