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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

答案

您需要将值保存在状态中的数组中,即:

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]

以上是关于onClick事件处理以调用该特定按钮上的函数的主要内容,如果未能解决你的问题,请参考以下文章

按钮 onclick 函数触发两次

Flask - 在按钮 OnClick 事件上调用 python 函数

JSP页面onclick事件失效

按钮onclick功能触发两次

AJAX TABLE:如何通过 onclick in 表格上的按钮调用函数? json

javascript添加HTML事件处理程序的两种方式学习