Question

我生成了以下四个按钮，但前两个按钮（“更多”按钮）不起作用。

这是代码： BuildControls.js

import React from 'react';
import BuildControl from './BuildControl/BuildControl';
import classes from './BuildControls.css';
const controls = [
  {label:'Salad', type:'salad'},
  {label:'Bacon', type:'bacon'},
  {label:'Cheese', type:'cheese'},
  {label:'Meat', type:'meat'}
]


const buildControls =(props)=>(

  <div className={classes.BuildControls}>
  <p>Current Price: <strong> {props.price} </strong> BDT</p>
  {controls.map(ctrl => (
    <BuildControl
    label ={ctrl.label}
    key={ctrl.label}
    addIngredient={()=>props.addIngredients(ctrl.type)}
    removeIngredient={()=>props.removeIngredient(ctrl.type)}
    disabled ={props.disabled[ctrl.type]}

    />
  )
  )}
  <button
  disabled={!props.purchaseAble}
  className={classes.OrderButton}
  onClick ={props.ordered}> ORDER NOW</button>
  </div>
);

export default buildControls;

BuildControl.js

   import React from 'react';
    import classes from './BuildControl.css';
    const builControl =(props)=>(
      <div className={classes.BuildControl}>
      <div className={classes.Label}> {props.label}</div>
      <button className={classes.Less} onClick={props.removeIngredient} disabled ={props.disabled}> Less</button>
      <button className={classes.More} onClick={props.addIngredient}> More</button>
      </div>
    );

    export default builControl;

因为所有按钮都是由循环问题生成的，所以所有按钮都应该相同。最后两个按钮正常工作，但前两个按钮不工作。它杀死了我的一天。我不知道如何调试，因为我是React JS中的新手。有帮助吗？

更新：当我从{classes.BuildControls}中删除<div className={classes.BuildControls}>时，它可以正常工作。这是CSS：

 .BuildControls {
    width: 100%;
    background-color: #CF8F2E;
    display: flex;
    flex-flow: column;
    align-items: center;
    box-shadow: 0 2px 1px #ccc;
    margin: auto;
    padding: 10px 0;
}

.OrderButton {
    background-color: #DAD735;
    outline: none;
    cursor: pointer;
    border: 1px solid #966909;
    color: #966909;
    font-family: inherit;
    font-size: 1.2em;
    padding: 15px 30px;
    box-shadow: 2px 2px 2px #966909;
}

.OrderButton:hover, .OrderButton:active {
    background-color: #A0DB41;
    border: 1px solid #966909;
    color: #966909;
}

.OrderButton:disabled {
    background-color: #C7C6C6;
    cursor: not-allowed;
    border: 1px solid #ccc;
    color: #888888;
}

.OrderButton:not(:disabled) {
    animation: enable 0.3s linear;
}

@keyframes enable {
    0% {
        transform: scale(1);
    }
    60% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

奇怪！ CSS导致点击事件的问题。我的代码有什么问题？

Answer 1

没有看到完整的代码，我想nums[nums.length - 1];中的addIngredients应该是addIngredient：

buildControls

如果不是那样，请发布const buildControls =(props)=>( <div className={classes.BuildControls}> <p>Current Price: <strong> {props.price} </strong> BDT</p> {controls.map(ctrl => ( <BuildControl label ={ctrl.label} key={ctrl.label} addIngredient={()=>props.addIngredients(ctrl.type)} // typo here -------------------------^和addIngredient方法，包括它们的定义位置和传递方式。

为什么前两个项目不起作用？

1 个答案: