Как изменить кнопку корзины "ДОБАВИТЬ" на другое имя

#javascript #reactjs

Вопрос:

Я хочу, чтобы кнопка «ДОБАВИТЬ» стала «ДОБАВЛЕНА» после того, как я нажал кнопку «ДОБАВИТЬ» и отключил ее.

 {
      products.map((val, i)=>(
        <div className="product_item">
           {
            val.productType === 'chicken'?
              <>
              <img src={img2}></img>
              <p className="product_data">Chicken Name: {val.chickeName}</p>
              <p align="left" className="product_data">weight: 500gm</p>
              <p align="left"className="product_data">₹{val.price}/- <button onClick={addTocartProduct}>ADD</button></p>
              </>: null
           }
        </div>
     ))
   }

У меня есть пример проекта в react js, там есть кнопка «Добавить в корзину». Но я хочу, чтобы кнопка «ДОБАВИТЬ» стала «ДОБАВЛЕНА» после того, как я нажал кнопку «ДОБАВИТЬ» и отключил ее.

введите описание изображения здесь

Если кто-нибудь может знать, пожалуйста, оставьте свой ответ.

Ответ №1:

Учитывая, что у вас есть массив products , вы должны инициализировать массив bool:

 const [buttonsClicked, setButtonsClicked] = useState(new Array(products).fill(false));

Затем

 {
      products.map((val, i)=>(
        <div className="product_item">
           {
            val.productType === 'chicken'?
              <>
              <img src={img2}></img>
              <p className="product_data">Chicken Name: {val.chickeName}</p>
              <p align="left" className="product_data">weight: 500gm</p>
              <p align="left"className="product_data">₹{val.price}/- <button onClick={(e) => addTocartProduct(val, i)}>{buttonsClicked[i] ? 'ADDED' : 'ADD'}</button></p>
              </>: null
           }
        </div>
     ))
   }

И, наконец addTocartProduct , функция:

 const addTocartProduct = (val , i) => {
   let result = [...buttonsClicked];
   result[i] = !result[i];
   setButtonsClicked(result);
}

Ответ №2:

Вам просто нужно простое тройное условие и состояние. Вот пример :

 const App = () => {
  const [isAdded, setIsAdded] = React.useState(false);

  const handleClick = () => {
    setIsAdded(true);
  }

  return (
    <div>
      <button onClick={handleClick}>{isAdded ? 'ADDED' : 'ADD'}</button>
    </div>
  );
};

Ответ №3:

Вы должны определить некоторое состояние в своем компоненте

 const [ctaButton,setCtaButton] = useState('ADD')

Затем в вашей addTocartProduct функции установите состояние в новое

 setCtaButton('ADDED')

Окончательно

 <button onClick={addTocartProduct}>{ctaButton}</button>