时间戳

首页 > 解决方案 > onClick 事件处理以调用该特定按钮上的函数

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

问题描述

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

标签： reactjsevent-handling

解决方案

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

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]

推荐阅读