onClick事件处理以调用该特定按钮上的函数

Posted 2021-04-17

import React from 'react';
import './MenuCard.css';

class MenuCard extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            showButton: false,
            hideButton: true,
            aValue: 1,
            breads: [],
            category: [],
            ids: 0
        };
        this.onShowButton = this.onShowButton.bind(this);
    }

    onShowButton = (id) => {
        this.setState({
                showButton: !this.state.showButton, 
                hideButton: !this.state.hideButton
        }));
    }

    onValueIncrease = () => {
        this.setState({aValue: this.state.aValue + 1});
    }

    onValueDecrease = () => {
        this.setState({aValue: this.state.aValue - 1});
    }

 render() {

        return (
            <div>
                {this.state.category.map(types => {
                    return (<div>
                        <div className="menu-head">{types}</div>
                        < div className="container-menu">
                            {this.state.breads.map((d, id)=> {
                                if (d.category === types) {
                                    return (
                                        <div className="content">
                                            <div className="items"> {d.item_name}</div>
                                            <div className="prices"> {d.price} Rs.</div>
                                            <button id ={id} onClick={() => this.onShowButton(d.id)}
                                                    hidden={this.state.showButton}
                                                    className="add-menu-btn"> add
                                            </button>
                                            <span key={d.id} hidden={this.state.hideButton}>
                                                     <button id={d.id} className="grp-btn-minus"
                                                             onClick={this.state.aValue <= 1 ? () => this.onShowButton(d.id) : () => this.onValueDecrease(d.id)}>-
                                                     </button>
                                                    <input className="grp-btn-text" type="text"
                                                           value={this.state.aValue} readOnly/>
                                                    <button id={d.id} className="grp-btn-plus"
                                                            onClick={() => this.onValueIncrease(d.id)}>+
                                                    </button>
                                                </span>
                                        </div>
                                    )
                                }
                            })}
                        </div>
                    </div>)
                })}
            </div>
        )
    }

根据1项目有多个按钮。

这里当我点击单个按钮时问题全部得到更新我只需要一个按钮点击一次更新2

答案

您需要将值保存在状态中的数组中，即：

values: [
  { id: 1, value: 20},
  { id: 2, value: 1}
]

如果您需要设置状态，可能如下所示：

const values = Object.assign({}, this.state.values, { [id]: value })
this.setState({ values })

要从状态获取值：

const value = this.state.values[id]