当用户点击选择标签选项时，我遇到了一个问题，然后转换对会自动查找数据请求。
例
当USER选择GBPAUD，因此询问值将为7429.4。现在，我将成对的GBPAUD切片为AUD，并使用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 } ]I have a problem implementing something like when user click the select tag option and then conversion pair will automatically find the data ask.
EXAMPLE
when USER select GBPAUD so the ask value will be 7429.4 now i slice the pairs GBPAUD turn as AUD using var resultLast. After that i create some string called var conversionPairs = 'USD' + resultLast;. So i console it i get USDAUD. My problem is how to make search filter on the local.json so i can get USDAUD ask value.
Here is my code.
I really appreciate for your help.
React Code
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 } ]最满意答案
由于您的数据是一个数组，因此您可以使用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 ，特别是考虑到它现在是一个保留字。
Since your data is an array, you can use Array.prototype.find to get the object matching your selected symbol. It looks like this:
const arr = [1,2,3] arr.find( num => num > 2 ) // returns 3Basically, you give it a function that gets called for each item in the array to determine if it's the one you want. That function must return a truthy or falsey value for each item. The first item that returns true is what gets returned from find().
To make that work with your code you'll want to change a few things:
// 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 }) }You might also consider naming you state keys without capital letters. That makes them seem like components. Either values or options (like an option tag) would read much better than Values. The same goes for Symbol, especially considering that it's a reserved word now.
更多推荐
发布评论