onChange通過使用選擇ReactJS搜索

Question

我有一個問題，執行類似於當用戶點擊選擇標記選項，然後轉換對會自動找到數據問。

例

時USER選擇GBPAUD所以問值爲7429.4 現在我切片GBPAUD依次爲使用var resultLast澳元的對。之後，我創建了一個名爲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也是如此，尤其是考慮到它現在是保留字。