尝试使用反应中的 onclick 事件更改 table 中项目的值

Question

我需要为 table 中的每个项目添加 clickhandler 事件，这样当我点击 table 中的任何项目时，数量项目应生成介于 0 之间的随机数20.This 是我试过的代码，所以 far.Product 有 {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;

Answer 1

将数量放入状态，然后在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>
    );
}

Answer 2

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

第一次使用useEffect hook设置初始值

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

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

并在 table 单元格中显示结果。

这里是完整的代码

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;

尝试使用反应中的 onclick 事件更改 table 中项目的值

Trying to change the value of an item in a table using onclick event in react

javascript

onclick

reactjs