javascript - 在 reactjs onclick 事件中更新了所有按钮

Question

单击一个按钮会更新所有按钮，但我想更改该特定单击按钮的状态。请检查下面的图片链接和代码。

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

Answer 1

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

第一 - aValue每个项目都应该存储在一个结构中 - array或 object .它可能是 order = {} - 对象 id - 以金额为值的键控属性，如下所示:

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

事件处理程序(对于“添加”)应该检查是否 id对于选择的产品已经存在于订单对象(作为属性名称)和更新数量(+/-)或创建新的 1值(并在减少量 = 0 时删除属性)。

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

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

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

这样我们就可以简单地传递已经订购的数量并有条件地渲染按钮:

<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 .