在reactjs 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: 1,
        btnVal: 'Add'

    };
}

onKeyCheck = (e) => {
    this.state.breads.map(filt => {
        if (filt.id === e.target.id) {
            console.log(e.target.id + ' and ' + filt.id)
            return (this.setState({showButton: !this.state.showButton, hideButton: !this.state.hideButton}));
        }
    })
}

onShowButton = () => {
    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});
}

componentDidMount() {
    fetch('http://localhost:3000/menu/food_category', {
        method: 'get',
        headers: {'content-type': 'application/json'}
    })
        .then(response => response.json())
        .then(menudata => {
            this.setState({category: menudata.menu_type})
            console.log(this.state.category)
        })

    fetch('http://localhost:3000/menu', {
        method: 'get',
        headers: {'content-type': 'application/json'}
    })
        .then(response => response.json())
        .then(menudata => {
            this.setState({breads: menudata  })
        })
}


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>
                                        <div className="content" key={id} id={d.id}>
                                            <div className="items"> {d.item_name}</div>
                                            <div className="prices"> {d.price} Rs.</div>
                                            {this.state.showButton ?
                                                <div>
                                                    <button
                                                        className="grp-btn-minus"
                                                        onClick={this.state.aValue <= 1 ?
                                                            () => this.onShowButton() :
                                                            () => this.onValueDecrease()}>-
                                                    </button>
                                                    <input className="grp-btn-text" type="text"
                                                           value={this.state.aValue} readOnly/>
                                                    <button id={d.id}
                                                            className="grp-btn-plus"
                                                            onClick={() => this.onValueIncrease()}>+
                                                    </button>
                                                </div> :
                                                <button id={d.id} key={id}
                                                        onClick={ this.onKeyCheck}
                                                        className="add-menu-btn">
                                                    add
                                                </button>
                                            }
                                        </div>
                                    </div>
                                )
                            }
                        })}
                    </div>
                </div>)
            })}
        </div>
    )
}
}

export default MenuCard;

This is the first image of multiple rendering of component Add buttons

Here is the problem that all buttons get updated on single click

答案

看起来所有按钮都共享相同的状态。您可以尝试将按钮分解为自己的组件，然后将按钮所需的状态移动到那里。这样，当您单击按钮时，将更新该特定按钮的状态，而不是包含所有按钮的父组件的状态。

另一答案

您正在使用array项目，但在处理程序中引用单个共享值。事实上你正在使用一些共享值：showButton, hideButton, aValue），2/3不必要;）

首先 - 每个项目的aValue应存储在一个结构 - array或object。它可能是一个order = {} - 具有id键控属性的对象，其数量为如下值：

order = {
  'masala_id': 1,
  'kebab_id' : 2
}

事件处理程序（用于'添加'）应检查选择产品的id是否已存在于订单对象（作为属性名称）和更新金额（+/-）或创建新的1值（并在减少金额= 0时删除属性） 。

在实践中，order还应该包含一个price - 它接缝就像复制数据一样，但计算总订单价值要容易得多。

order = {
  'masala_id': {
      'amount': 1,
      'price': 20,
    },
  'kebab_id' : {
      'amount': 2,
      'price': 180,
    }
}

项目不需要是一个组件，但它更容易维护，保持可读性等。

这样我们就可以简单地传递已经订购的金额和有条件的渲染按钮：

<Product id={d.id}
  name={d.item_name}
  price={d.price}
  amount={order[d.id] ? order[d.id].amount : 0 }
  amountHandler={this.changeAmountHandler}
/>

产品应略微改进和简化（例如，顶部key需要div）：

class Product extends React.Component {
  render () {
    const (id, name, price, amount, amountHandler} = this.props;
    const showIncrease = !!amount; // boolean, it also means "don't show add button"
    return (
      <div key={id} >
        <div className="content">
          <div className="items">{name}</div>
          <div className="prices">{price} Rs.</div>
          {showIncrease ?
            <div>
              <button
                className="grp-btn-minus"
                onClick={(e) => { amountHandler(e, id, -1) }}
              >-</button>
              <input className="grp-btn-text" type="text"
                value={amount}
                readOnly/>
              <button 
                className="grp-btn-plus"
                onClick={(e) => { amountHandler(e, id, 1) }}
              >+</button>
            </div> :
            <button 
              onClick={(e) => { amountHandler(e, id, 1) }}
              className="add-menu-btn"
            >add</button>
          }
        </div>
      </div>
    )}}

这样你就可以在一个处理程序中处理所有事件，在主要组件中保持整个订单状态......如果出现性能问题，只需使用PureComponent。