Question

我在实现类似用户点击选择标记选项时遇到问题，然后转换对会自动查找数据问题。

示例

当 USER 选择 GBPAUD 时，请求值将为7429.4 现在我使用var resultLast将GBPAUD对转为澳元。之后我创建了一个名为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也是如此，特别是考虑到它现在是一个保留词。

onChange使用Select ReactJS进行搜索

1 个答案: