Javascript 尝试在react中使用onclick事件更改表中项的值

我需要将clickhandler事件添加到表中的每个项目，这样，当我单击表中的任何项目时，数量项目应该生成0到20之间的随机数。这是我迄今为止尝试过的代码。产品具有{name，price，quantity}

import React from 'react';
  function ProductRow({ product }) {

  function handleClick(){
    var min=0;
    var max=20;
    product.quantity=min + (Math.random() * (max-min));
  }
  
const getColor = (quantity) => {
  
  if (quantity === 0) return 'red';

  if (quantity < 10) return 'blue';

  return '';



};
return (
      <tr style={{ color: getColor(product.quantity) }}     onClick={handleClick} >
          <td >{product.name}</td>
          <td >{product.price}</td>
          <td >{product.quantity}</td>
      </tr>
  );
}

export default ProductRow;

从“React”导入React；
函数ProductRow（{product}）{
函数handleClick（）{
var min=0；
var max=20；
product.quantity=min+（Math.random（）*（max-min））；
}
常量getColor=（数量）=>{
如果（数量===0）返回“红色”；
如果（数量<10）返回“蓝色”；
返回“”；
};
返回(
{product.name}
{产品价格}
{product.quantity}
);
}
导出默认ProductRow；

将数量置于状态，然后在

handleClick

中，您可以设置该状态：

function ProductRow({ product }) {
    const [quantity, setQuantity] = useState(product.quantity);
    function handleClick() {
        var min = 0;
        var max = 20;
        setQuantity(min + (Math.random() * (max - min)));
    }

    const getColor = (quantity) => {
        if (quantity === 0) return 'red';
        if (quantity < 10) return 'blue';
        return '';
    };
    return (
        <tr style={{ color: getColor(quantity) }} onClick={handleClick} >
            <td >{product.name}</td>
            <td >{product.price}</td>
            <td >{quantity}</td>
        </tr>
    );
}

函数ProductRow（{product}）{
常量[数量，设置数量]=使用状态（产品数量）；
函数handleClick（）{
var min=0；
var max=20；
设置数量（最小+（数学随机（）*（最大-最小））；
}
常量getColor=（数量）=>{
如果（数量===0）返回“红色”；
如果（数量<10）返回“蓝色”；
返回“”；
};
返回(
{product.name}
{产品价格}
{数量}
);
}

您应该为该单元格的值维护一个本地状态变量

qty

首次使用useEffect挂钩设置初始值

useEffect = ( () => {
      setQty(product.quantity)
   } ,[])

然后在onClick处理程序中执行相同的操作

并在表格单元格中显示结果

这是完整的代码

import React from 'react';
  function ProductRow({ product }) {

  const [qty , setQty] = useState(0);

   useEffect = ( () => {
      setQty(product.quantity)
   } ,[])

  function handleClick(){
    var min=0;
    var max=20;
    setQty(min + (Math.random() * (max-min)));
  }
  
const getColor = (quantity) => {
  
  if (quantity === 0) return 'red';

  if (quantity < 10) return 'blue';

  return '';



};
return (
      <tr style={{ color: getColor(product.quantity) }}     onClick={handleClick} >
          <td >{product.name}</td>
          <td >{product.price}</td>
          <td >{qty}</td>
      </tr>
  );
}

export default ProductRow;

从“React”导入React；
函数ProductRow（{product}）{
const[qty，setQty]=useState（0）；
useEffect=（（）=>{
设置数量（产品数量）
} ,[])
函数handleClick（）{
var min=0；
var max=20；
设置数量（最小+（数学随机（）*（最大最小））；
}
常量getColor=（数量）=>{
如果（数量===0）返回“红色”；
如果（数量<10）返回“蓝色”；
返回“”；
};
返回(
{product.name}
{产品价格}
{qty}
);
}
导出默认ProductRow；

值不会随单击而更改。是否确实使用了独立的

数量变量，如答案中的代码中所示？使用
product.quantity
将不起作用，因为它不在状态中，但如果我将其更改为quantity，则条件语句不适用于0在单击后将颜色更改为红色。如答案中的代码所示，请调用
getColor（quantity）
，而不是
getColor（product.quantity）
-您需要始终使用处于状态的变量，而不是道具