javascript - React中根据输入和后端进行计算

Question

我正在学习使用react并尝试创建一个基于后端和输入的应用程序。

说明:

用户选择:

A.国家/地区

B.输入 myValue 的值

“国家/地区”字段中的应用程序显示来自后端的数组，如下所示:[{“国家”:“法国”，“百分比1”:10.0，“百分比2”:10.0，“百分比3”:7.5}]

应用程序应该从用户那里获取输入，我能够做或多或少的事情。更改handleChangeCountry值有效。 MyValue也显示在控制台上，应用程序读取它

我希望应用程序在用户选择国家/地区并输入值后，计算后端数组中该值的百分比。 future 还会有更多的国家，每个国家的比例也会不同。

也就是说，当用户输入 France 且值为 200 时，应用程序应统计 Percentage1 = 10

class Calculator extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        country: [],
        selectedCountry: '',
        myValue: '',
        percentage1: [],
        percentage2: [],
        percentage3: [],
    };
    this.handleChangemyValue = this.handleChangemyValue.bind(this);
}

componentDidMount() {
    axios
        .get('URL')
        .then((response) => {
            console.log(response);
            console.log(this.Calculation);

            this.setState({
                country: response.data
            });
        })
        .catch((error) => console.log(error.response));
}
handleChangeCountry = (event) => {
    this.setState({ selectedCountry: event.target.value });
    console.log(event.target.value);
};


handleChangemyValue(event) {
    this.setState({ mylValue: event.target.value });

    const myValue = event.target.value;
    console.log(myValue);
}


inputCountryHandler = (event) => {
    this.setState({
        input: {
            country: event.target.value
        }
    });
};


inputmyValueHandler = (event) => {
    this.setState({
        input: {
            mylValue: event.target.value
        }
    });
};



showDiv = () => {
    if ((document.getElementById('myDIV').style.visibility = 'hidden')) {
        document.getElementById('myDIV','myDIV2','myDIV3','myDIV4').style.visibility = 'visible';
        document.getElementById('btn-calculate').style.marginTop = '-100px';
    }
};

render() {
    //  const { country, category, currency } = this.state;

    return (

                <Form.Label>Country</Form.Label>
                <Form.Control
                    as="select"
                    className="User-Input"
                    placeholder=""
                    value={this.state.selectedCountry}
                    onChange={this.handleChangeCountry.bind(this)}
                >
                    <option />
                    {this.state.country &&
                        this.state.country.length > 0 &&
                        this.state.country.map((countryItem) => (
                            <option key={countryItem.country}>{countryItem.country}</option>
                        ))}
                </Form.Control>



                        <Form.Label>My value</Form.Label>
                        <Form.Control
                            //  ref={(input) => (this.textInput = input)}
                            placeholder=""
                            className="User-Input"
                            value={this.state.pmylValue}
                            onChange={this.handleChangemyValue}
                            //onChange={this.handleChangemylValue}
                            //onSubmit={this.inputmyValueHandler}
                            type="number"
                        />


            <div className="calculator-results">
                                <Row>
                    <Col xs={6} md={5} className="Column-Items results-div Lg" id="myDIV">
                        <ul>
                            <ul>
                                <b>Percentage 1:</b>
                            </ul>
                            <ul>
                                <b>Percentage 2:</b>
                            </ul>
                            <ul>
                                <b>Percentage 3:</b>
                            </ul>
                        </ul>
                    </Col>
                    <Col xs={6} md={5} className="Column-Items results-div Pg" id="myDIV3">
                        <ul>

                            <ul type="number">{this.state.myValue}</ul>
                            <ul> here percentage2 form mylValue</ul>
                            <ul>here percentage3 form mylValue </ul>
                        </ul>
                    </Col>

                    <Col xs={12} className="second-part results-div">
                        <hr className="results-div" />
                    </Col>

                    <Col xs={6} md={5} className="Column-Items-2 results-div" id="myDIV2">
                        <ul className="Ld">
                            <ul>
                                <b>
                                    <font color="#27aae1">Total sum</font>
                                </b>
                            </ul>
                        </ul>
                    </Col>
                    <Col xs={6} md={5} className="Column-Items-2 results-div" id="myDIV4">
                        <ul className="Pd">
                            <ul>
                                <b>
                                    <font color="#27aae1">here total sum of percentage1+percentage2+percentage3</font>
                                </b>
                            </ul>
                        </ul>
                    </Col>

                    <Button
                        onClick={this.showDiv}
                        className="calculate-btn"
                        variant="primary"
                        type="submit"
                        id="btn-calculate"
                    >
                        <label className="calculate-btn-label" for="calculate">
                            Calculate
                        </label>
                    </Button>
                </Row>
            </div>
                );
}
}

export default Calculator;

感谢您的帮助!

Answer 1

我已经解决了你的问题，但这不是完美的解决方案，它只是为了展示如何继续:)。首先，我更改了您的后端数据结构，因为在前端处理它更简单。如果我们使用您的数据结构解决方案，处理数据将会更加复杂。

let backEndData = [{"country": "France","percentages": [10.0,10.0,7.5]},{"country": "Germany","percentages": [5.0,25.0,17.5]},{"country": "Spain","percentages": [5.0,17.0,22.5]}]

//Sum of all percentages
let sum = this.state.percentages.reduce((acc,item)=>{
return acc+item
},0)

否则，我已经更改了handleChangemyValue

handleChangemyValue(event){
  const myValue = event.target.value;

  fetch('https://api.myjson.com/bins/rhin3')
  .then((response) => response.json()).then(response=> {
     this.setState({
      data: response,
      defaultCountry: response[0].country,
      percentages:response[0].percentages.map(e=>!Number.isNaN(parseInt(myValue))?e*parseInt(myValue):e),
    });
  })
  .catch((error) => console.log(error.response));
}

此外，在我的示例中，我使用 fetch agin axios，但你可以做任何你想做的事情。

看 fiddle :https://jsfiddle.net/zx7y2v1m/

这是一个具有不同数据结构的工作 fiddle :https://jsfiddle.net/o4Lb5ztp/