使用 JavaScript 对象和 React 限制环境中的单个按钮点击

Question

在这个程序中，当用户点击按钮时，按钮就像图片下面一样处于活动状态。 Image

这些都是用javascript对象制作的。如果单击按钮，对象值将更改按钮的值。如果高级用户在程序中单击多个按钮，则应禁用前一个按钮。

这些代码由原子设计模式组成，相关代码如下。关于该页面的第一个代码。

const SeeAll = () => {
const [on, setOn] = useState({
    sum: false,
    payWith: false,
    sale: false,
    cashInput: false,
    cashSum: false,
    credit: false,
    creditCom: false
});

const setDetail = (key, e) => {
    let value = on[key];

    setOn({
        ...on,
        [key]: !value
    })
}

return (
    /*생략*/
                    <Receipt
                        map="false"
                        event={setDetail}
                        on={on}/>
    /*생략*/
)
}

第二个代码包含这些按钮。

const SellerReceipt = ({
    posNum,
    posName,
    order,
    call,
    map,
    event,
    on
}) => {
return (
    /*생략*/

        <Btn placeholder="매출 합계" event={() => event('sum')} onKey={on["sum"]} />
        <Btn placeholder="결제 수단 별 매출내역" event={() => event('payWith')}  onKey={on["payWith"]}/>
        <Btn placeholder="할인 매출내역" event={() => event('sale')}  onKey={on["sale"]}/>
        <Btn placeholder="현금시재 입력내역" event={() => event('cashInput')}  onKey={on["cashInput"]}/>
        <Btn placeholder="현금 정산액" event={() => event('cashSum')}  onKey={on["cashSum"]}/>
        <Btn placeholder="신용카드정산 내역" event={() => event('credit')}  onKey={on["credit"]}/>
        <Btn placeholder="카드사별 매출내역" event={() => event('creditCom')}  onKey={on["creditCom"]}/>
    </div>

)
}

关于Button的第三个代码。

const SellerBtn = ({placeholder, event, onKey}) => {
return (
    <button
        onClick={event}
        className="sellerBtn"
        style={{
            backgroundColor: `${onKey
                ? 'rgb(100,100,100)'
                : 'rgb(238,238,238)'}`,
            color: `${onKey
                ? 'white'
                : 'black'}`
        }}>{placeholder}</button>
)
}

谢谢。

Answer 1

如果我没理解错的话，你总是希望你的按钮是相互排斥的。如果是这样，最简单的解决方案应该是：

const SeeAll = () => {
  const [on, setOn] = useState(null); // or empty string, since you want nothing selected in the beginning
  const setDetail = (key, e) => {
  // button already clicked? set it to null
    setOn(on === key ? null : key)
  }
  return (...)
}

const SellerReceipt = ({ posNum, posName, order, call, map, event, on }) => { 
  return ( 
        <Btn placeholder="매출 합계" event={() => event('sum')} onKey={on === "sum"} />
        <Btn placeholder="결제 수단 별 매출내역" event={() => event('payWith')}  onKey={on === "payWith"}/>
        // more buttons
    </div>
  )
}

使用 JavaScript 对象和 React 限制环境中的单个按钮点击

Limiting single button clicks in an environment using JavaScript objects and React

mouseclick-event

javascript-objects

reactjs