React组件MealItemForm中如何在输入数量大于20时禁用Add按钮

你的原有逻辑仅在表单提交时才做校验，且未实时监听输入框的数值变化，因此无法动态控制按钮的禁用状态，可按以下步骤修改：

步骤1：新增输入值受控状态与实时校验逻辑 #

新增currentAmount状态管理输入框当前值，同时新增onChangeHandler处理实时输入校验：

import { useRef, useState } from 'react'    
import Input from '../../UI/Input'
import classes from './MealItemForm.module.css'

export default function MealItemForm(props) {
  const [amountIsValid, setAmountIsValid] = useState(true)
  // 新增：管理当前输入的数量值，默认值为1
  const [currentAmount, setCurrentAmount] = useState(1)
  const amountInputRef = useRef()

  // 新增：实时监听输入变化并做校验
  const amountChangeHandler = (e) => {
    const val = +e.target.value
    setCurrentAmount(val)
    // 实时校验数值有效性
    setAmountIsValid(val >= 1 && val <= 20)
  }

  const submitHandler = event => {
    event.preventDefault()
    // 提交时二次校验避免异常情况
    if (!amountIsValid) return
    props.onAddToCart(currentAmount)
  }

步骤2：给Input组件绑定onChange事件 #

给自定义Input组件传入onChange属性，请确保你的自定义Input组件内部已将该属性绑定到原生input元素上：

return (
    <form className={classes.form} onSubmit={submitHandler}>
      <Input
        ref={amountInputRef}
        label='Amount'
        input={{
          id: 'amount_' + props.id,
          type: 'number',
          min: '1',
          max: '20',
          step: '1',
          value: currentAmount, // 绑定受控组件的值
          onChange: amountChangeHandler // 绑定值变化监听函数
        }}
      />
      {/* 两层大括号：外层用于嵌入JavaScript表达式，内层表示传入的值是一个对象 */}

步骤3：给按钮添加disabled属性 #

根据amountIsValid状态动态控制按钮的禁用状态：

{/* 当数值无效时禁用按钮 */}
      <button disabled={!amountIsValid}>+ Add</button>
      {!amountIsValid && <p>请输入有效的数量(1~20)</p>}
    </form>
  )
}

如果你的自定义Input组件无法透传onChange属性，也可以在组件挂载后给amountInputRef绑定原生input事件做监听，上述受控组件方案更符合React的设计规范。

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