Как исправить автоматическое монтирование и размонтирование компонента, как DropDownItem используется в меню DropDown? - PullRequest
Новая
       23

Как исправить автоматическое монтирование и размонтирование компонента, как DropDownItem используется в меню DropDown?

0 голосов
/ 07 октября 2019

Я пытаюсь создать компонент React.js, который можно будет использовать позже. Этот компонент представляет собой меню DropDown, его DropDownItems также представляют собой один компонент, отображаемый несколько раз для DropDownItems. Этот компонент DropDownItems использует простой счетчик операций. Когда я переключаю меню DropDown, это заставляет состояние DropDownItems устанавливать начальные значения, таким образом я теряю сохраненные или обработанные данные каждого компонента DropdownItem. Как я могу предотвратить сброс моего состояния при каждом переключении людей DropDown?

Компонент DropDownMenu 

import React, { Component } from 'react';
import { Container, Col, Dropdown, DropdownToggle, DropdownMenu, DropdownItem} from 'reactstrap';
import { IoIosArrowDown } from "react-icons/io";
import DropDownItems from './components/dropdownItems';

class MyDropDownMenu extends Component {
    constructor(props) {
        super(props);

        this.toggle = this.toggle.bind(this);
        this.state = {
            dropdownOpen: false
        };
    }

    toggle() {

        this.setState(prevState => ({
            dropdownOpen: !prevState.dropdownOpen
        }));

    }

    render() {
        return (

            <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
                <DropdownToggle block className="border" color="#fff" >
                    <div className="float-left" >DropDown</div><div className="float-right"><IoIosArrowDown /></div>
                </DropdownToggle >
                <DropdownMenu className="btn-block border-primary">
                    <Container>
                        <DropDownItems />
                        <DropDownItems />
                        <DropDownItems />
                    </Container>
                </DropdownMenu>
            </Dropdown>

        );
    }
}
export default MyDropDownMenu;

Компонент DropDownItem 

import React, { Component } from 'react';
import { Col, Container, Row } from 'reactstrap';

class DropDownItems extends Component {

    state = {
        checked: false,
        unitPrice: 100,
        quantity: 1,
        totalPrice: 100
    }

    setVisibility() {
        this.setState({ checked: !this.state.checked })
        if (!this.state.checked)
            return
        this.setState({ quantity: 1 })
        this.setState({ totalPrice: this.state.unitPrice })
    }
    increment() {
        var a = this.state.quantity
        a++
        this.setState({ quantity: a })

        a = a * this.state.unitPrice
        this.setState({ totalPrice: a })
    }
    decrement() {
        var a = this.state.quantity
        if (a === 1) {
            this.setState({ totalPrice: this.state.unitPrice })
            return
        }
        a--
        this.setState({ quantity: a })
        a = a * this.state.unitPrice
        this.setState({ totalPrice: a })

    }

    render() {

        return (
            <Container>
                <Row className="my-2" >
                    <Col>
                        <input type="checkbox" checked={this.state.checked}
                            onChange={() => this.setVisibility()} />
                        <text className="ml-1">1 pc checken</text>
                    </Col>

                    <Col md={{ offset: "auto" }}>
                        <text className="mx-2" > PKR {this.state.totalPrice}</text>
                        <button disabled={!this.state.checked} className="mx-2 p-2"
                            onClick={() => this.increment()}>+</button>
                        {this.state.quantity}
                        <button disabled={!this.state.checked} className="mx-2 p-2"
                            onClick={() => this.decrement()}>-</button>

                    </Col>
                </Row >
            </Container>
        );
    }
 }
 export default DropDownItems;

Я ожидаю, что это переключениеменю не должно вызывать потерю каких-либо данных или установку состояния в начальные значения. большое спасибо

...