Question

我正在建立一个带有反应的货币转换器。下拉列表的结构使得汇率作为期权“价值”包含在内，并且货币名称可供选择。

e.g. 

<select>
   <option value="1.1934">US Dollar</option>
   <option value="130.44">Yen</option>
</select>

有两个下拉菜单，一个在左边，一个在右边。我试图找出如何获得下拉的两个当前选项值（即汇率），当更改一个时。这是为了通过将一个除以另一个来开始货币计算。

到目前为止，这是在handleChange事件上发生的。我想知道如何修改它以获得两个下拉列表中的值？（我考虑过使用refs。）

import React, { Component } from 'react';
import "../../App.css"
import cc from 'currency-codes'

class Countries extends Component {
    constructor() {
        super();
        this.state = {
            countryCodes: [],
            left: '1.198',
            right: '1.198',
            leftinput: '',
            rightinput: '',
            rightmultiply: '',
            lefttext: ''
        };


    }

componentDidMount(){

    fetch('http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml')
        .then(response => response.text())
        .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
        .then(data => {
            const countryCodes = []; // define an empty array
            const cubes = data.getElementsByTagName("Cube")
            for( const element of cubes) {
                if (!element.getAttribute('currency')) {
                    continue;
                }
                countryCodes.push({
                    currency: element.getAttribute('currency'),
                    rate: element.getAttribute('rate')
                });
                this.setState({countryCodes});   

            }
        });       
    }

convertCurrCode(curr){
    const codeObject = cc.code(curr)
    const currName = codeObject['currency']
    return currName
}

handleChange(column, value, textname, text) {
    this.setState({[column]: value, [textname]: text}, () => {
        console.log('left: ', this.state.left, 'lefttext: ', this.state.lefttext);
        console.log('right: ', this.state.right);
        console.log('leftinput: ', this.state.leftinput);
        console.log('rightinput: ', this.state.rightinput);
        console.log('rightmultiply: ', this.state.leftinput * this.state.right/this.state.left)
    });
}    

    render() {       

        const options = this.state.countryCodes.map(
            ({currency, rate}) => (<option value={rate}>{this.convertCurrCode(currency)}</option>));
        return (

            <div>                
                <div className="App-column-left">
                    <p>{this.state.left} USD = {this.state.right} EUR</p>
                    <select ref="App-column-left-select" onChange={e => this.handleChange('left', e.target.value, e.target.selectedOptions[0].text)}>
                        {options}
                    </select>
                    <input type="text" placeholder={this.state.rightinput * this.state.left/this.state.right} onChange={e => this.handleChange('leftinput', e.target.value)}></input>
                </div>

                <div className="App-column-right">
                    <p>{this.state.right} USD = {this.state.left} EUR</p>
                    <select ref="App-column-right-select" onChange={e => this.handleChange('right', e.target.value)}>
                        {options}
                    </select>
                    <input type="text" placeholder={this.state.leftinput * this.state.right/this.state.left} onChange={e => this.handleChange('rightinput', e.target.value)}></input>
                </div>
            </div>
        )
    }
}


export default Countries;

谢谢，

罗伯特

英国伦敦

Answer 1

将2个下拉菜单的默认值保存到状态，当您更改其中一个时，您始终可以从状态读取第二个下拉菜单的值。

Answer 2

假设您一次只能更改一个选项，为什么不将选择的值存储在状态中，然后在其中一个或另一个更改时检索它们？然后，如果需要在组件外部公开这两个值，则可以传递给道具回调或类似的东西。

class ExampleComponent extends Component {

    state = {
        left: '',
        right: ''
    };

    handleChange(column, value) {
        this.setState({[column]: value}, () => {
            // Do whatever you want with both values
            console.log(this.state.left);
            console.log(this.state.right);
        });
    }

    // ...
}

然后您可以使用这样的处理程序：
onChange={e => this.handleChange('left', e.target.value)}

和：
onChange={e => this.handleChange('right', e.target.value)}

我建议您阅读React state and lifecycle。

在第一个下拉列表的更改中获取第二个下拉列表的选项值 - React

2 个答案: