如何禁用此组件末尾的按钮？

Question

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)

  const amountInputRef = useRef()

  const submitHandler = event => {
    event.preventDefault()

    const enteredAmount = amountInputRef.current.value
    const enteredAmountNumber = +enteredAmount

    if (enteredAmount.trim().length === 0 || enteredAmountNumber < 1 || enteredAmountNumber > 20) {
      setAmountIsValid(false)
      return
    }

    props.onAddToCart(enteredAmountNumber)
  }

尝试在 submitHandler 之后添加一个函数以在 enteredAmountNumber > 20 时禁用按钮，但无法正常工作！

  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',
          defaultValue: '1'
        }}
      />
      {/* Two curly braces: one for embedding javascript expression and the other one is there because the value is object */}

我想在 enteredAmount > 20 时禁用此按钮，请帮助我！

      <button>+ Add</button>

      {!amountIsValid && <p>Please enter a valid amount(1~20)</p>}
    </form>
  )
}

Answer 1

您需要使用 button

的 disabled 属性

<button disabled={enteredAmountNumber > 20}>Enter Amount</button>

代码基于您的评论

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)

  const amountInputRef = useRef()

  const submitHandler = event => {
    event.preventDefault()

    const enteredAmount = amountInputRef.current.value
    const enteredAmountNumber = +enteredAmount

    if (enteredAmount.trim().length === 0 || enteredAmountNumber < 1 || enteredAmountNumber > 20) {
      setAmountIsValid(false)
      return
    }

    props.onAddToCart(enteredAmountNumber)
  }

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',
          defaultValue: '1'
        }}
      />
      {/* Two curly braces: one for embedding javascript expression and the other one is there because the value is object */}

   <button disabled={!amountIsValid}>+ Add</button>

      {!amountIsValid && <p>Please enter a valid amount(1~20)</p>}
    </form>
  )
}

根据您的评论进行更新

工作演示

import "./styles.css";
import react, { useState } from "react";

export default function App() {
  const [clickCount, setClickCount] = useState(0);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button
        disabled={clickCount >= 20}
        onClick={() => {
          setClickCount((clickCount) => clickCount + 1);
        }}
      >
        {clickCount === 0 ? `Click Me` : `You clicked ${clickCount} times`}{" "}
      </button>
    </div>
  );
}

如何禁用此组件末尾的按钮？

How can I disable the button at the end of this component?

javascript

reactjs

button

use-ref

disabled-control