onChange Selectを使用して検索ReactJS

Question

ユーザーがselectタグオプションをクリックしたときのような問題が発生し、変換ペアが自動的にデータを検索します。 USERがGBPAUDを選択したときに

例は

そう尋ねる値は7429.4 が、今私はAUDがvar resultLastを使用してターンをGBPAUDペアをスライスになります。その後、私はvar conversionPairs = 'USD' + resultLast;と呼ばれる文字列を作成します。だから私はUSDAUDを得てそれをコンソール。私の問題は、local.jsonで検索フィルタを作成する方法です。USDAUD質問する。

ここに私のコードです。

本当にありがとうございます。

は、あなたのデータが配列であるので、あなたが選択したシンボルに一致するオブジェクトを取得するためにArray.prototype.findを使用することができ、コード

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

を反応します。それは次のようになります。

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になります。特に予約語であることを考慮してください。