React+TypeScript实现购物车数量为1时禁用减号按钮

问题描述 #

在TypeScript开发的React类组件项目中，需要实现购物车商品数量为1时禁用“-”按钮，避免点击后数量变为0或负数。尝试用jQuery和原生JS实现禁用功能时出现错误，现提供组件代码，请求正确的TypeScript实现方案。

我的组件代码 #

import {
    CardContent,
    CardActions,
    Button,
    Card,
    TextField,
} from '@mui/material'
import { Component } from 'react'
import './ProductListItem.scss'

type Props = {
    title: string
    description: string
    type: string
    capacity: string
    price: number
    image: string
}

type State = {
    count: number
}

class ProductListItem extends Component<Props, State> {
    constructor(props: Props) {
        super(props)
        this.state = {
            count: 1,
        }
        this.onIncrementClick = this.onIncrementClick.bind(this)
        this.onDecrementClick = this.onDecrementClick.bind(this)
    }
    onIncrementClick() {
        this.setState((prevState) => ({
            count: prevState.count + 1,
        }))
    }

    onDecrementClick() {
        this.setState((prevState) => ({
            count: prevState.count - 1,
        }))
    }

    render() {
        const { title, description, type, capacity, price, image } = this.props
        return (
            <Card variant="outlined" className="product">
                <CardContent>
                    <div className="product-image">
                        <img src={image} alt="" />
                    </div>
                    <div className="product-title">{title}</div>
                    <div className="product-description">{description}</div>
                    <div className="product-features">Type:{type}</div>
                    <div className="product-features">Capacity:{capacity}</div>
                    <div className="product-price">Price:{price}</div>
                    <div className="product-quantity">
                        <Button
                            variant="outlined"
                            onClick={this.onDecrementClick}
                        >
                            -
                        </Button>
                        <TextField size="small" value={this.state.count} />
                        <Button
                            variant="outlined"
                            onClick={this.onIncrementClick}
                        >
                            +
                        </Button>
                    </div>
                </CardContent>
                <CardActions className="btns-wrap">
                    <Button variant="outlined">Add to cart</Button>
                </CardActions>
            </Card>
        )
    }
}

export default ProductListItem

解决方案 #

只需两处修改即可实现需求：

1. 给减号按钮绑定禁用状态：根据组件state.count的值，在渲染时动态设置按钮的disabled属性，当count === 1时禁用按钮。
2. 优化减号点击逻辑：在点击事件中增加判断，确保数量不会小于1，即使按钮被意外触发（比如用户手动修改输入框值）也能保障数据合理性。

修改后的完整代码：

import {
    CardContent,
    CardActions,
    Button,
    Card,
    TextField,
} from '@mui/material'
import { Component } from 'react'
import './ProductListItem.scss'

type Props = {
    title: string
    description: string
    type: string
    capacity: string
    price: number
    image: string
}

type State = {
    count: number
}

class ProductListItem extends Component<Props, State> {
    constructor(props: Props) {
        super(props)
        this.state = {
            count: 1,
        }
        this.onIncrementClick = this.onIncrementClick.bind(this)
        this.onDecrementClick = this.onDecrementClick.bind(this)
    }
    onIncrementClick() {
        this.setState((prevState) => ({
            count: prevState.count + 1,
        }))
    }

    onDecrementClick() {
        // 仅当数量大于1时执行减1操作
        this.setState((prevState) => ({
            count: prevState.count > 1 ? prevState.count - 1 : 1,
        }))
    }

    render() {
        const { title, description, type, capacity, price, image } = this.props
        const { count } = this.state
        return (
            <Card variant="outlined" className="product">
                <CardContent>
                    <div className="product-image">
                        <img src={image} alt="" />
                    </div>
                    <div className="product-title">{title}</div>
                    <div className="product-description">{description}</div>
                    <div className="product-features">Type:{type}</div>
                    <div className="product-features">Capacity:{capacity}</div>
                    <div className="product-price">Price:{price}</div>
                    <div className="product-quantity">
                        <Button
                            variant="outlined"
                            onClick={this.onDecrementClick}
                            // 动态绑定禁用状态
                            disabled={count === 1}
                        >
                            -
                        </Button>
                        <TextField size="small" value={count} />
                        <Button
                            variant="outlined"
                            onClick={this.onIncrementClick}
                        >
                            +
                        </Button>
                    </div>
                </CardContent>
                <CardActions className="btns-wrap">
                    <Button variant="outlined">Add to cart</Button>
                </CardActions>
            </Card>
        )
    }
}

export default ProductListItem

说明 #

• 按钮禁用逻辑完全基于React状态驱动，不需要手动操作DOM，符合React的设计理念，状态变化时视图会自动更新。
• 点击事件中的判断是额外的防护层，避免出现意外的负数情况，增强代码健壮性。

内容的提问来源于stack exchange，提问作者Yaroslav