使用条件呈现检查每一行的React.js

Question

import React from "react";
import { Switch } from "@mui/material";
import { useState ,useRef} from "react";
import { useEffect } from "react";
import axios from "axios";

function DailyStock() {
  const [data, setData] = useState([]);

  useEffect(() => {
    getDailyData();
  }, []);

  
  const getDailyData =()=>{
    axios.get("http://localhost:4000/api/stocks/view-stock").then((res) => {
      const getData = res.data.data;
      setData(getData);
    });
  }

  return (
    <div className="row">
    
          <table
            id="datatable-buttons"
            className="table table-bordered dt-responsive nowrap w-100 "
          >
            <thead>
              <tr>
                <th>
                  <center>Product Name</center>
                </th>
                <th>
                  <center>Sold Quantity</center>
                </th>
              </tr>
            </thead>
            {data?.map((item) => {
              return (
                <tr>
                  <td>
                    <h5 className="ps-5">{item.pName}</h5>
                  </td>
                  <td>
                   
                            <input
                              type="number"
                              className="form-control"
                              placeholder="XXX"
                              onChange={(e)=>{e.target.value==(item.pQty-item.saleStock) && <><p>Value is Matching</p></> }}
                          />
                            
                  </td>
                </tr>
              );
            })}
          </table>
    </div>
  );
}

export default DailyStock;

我从数据库中获取值到dataTable。它工作得很完美。每一行都有一个输入框，其给定值应该等于获取的DB值。然后打印为“值是匹配的”。我从"onChange“事件中试过。它不起作用。当我使用状态的时候。它适用于所有行。我只需要一排排地检查一下。

Answer 1

问题是，在onChange元素的input方法中，您试图设置一个HTML，并且得到了Uncaught SyntaxError。你可以简单地这样做：

  <input
         ...
          onChange={(e)=>{e.target.value==(item.pQty-item.saleStock) && 'Value is matching!' }}
        />

Answer 2

您不能在onChange函数中编写表达式，特别是JSX。它需要一个赋值或函数调用。

由于您是在一个返回JSX的map函数中，所以尝试定义一个将在这里调用的单独组件。就像这样：

/src/components/Message.jsx

export default function Message() {
  return <>
    <p>Value is matching!</p>
  </>
}

/src/components/DailyStock.jsx

import Message from "./Message"

function DailyStock() {
  ...
  return (
      ...
      <td>
        <input
          type="number"
          className="form-control"
          placeholder="XXX"
          onChange={(e)=>{e.target.value==(item.pQty-item.saleStock) && <Message /> }}
        />
      </td>
      ...                  
  );

}

export default DailyStock;

或者，您可以编写一个警告或工具提示，如下所示：

<input
   onChange={(e) => {
     e.target.value === item.pQty - item.saleStock && alert("hi")
   }}
/>

Answer 3

您可以使用输入和匹配的标签组成另一个组件。这也将起作用：

1. 创建一个新的输入组件，如下所示：

const MyInput = ({ item }) => {
  const [value, setValue] = React.useState("");

  return (
    <div>
      <input
        type="number"
        value={value}
        className="form-control"
        placeholder="XXX"
        onChange={(e) => setValue(e.target.value)}
      />
      {value == item.pQty - item.saleStock && <p>Value is Matching</p>}
    </div>
  );
};

用MyInput替换当前的input，

<td>
   <MyInput item={item} />
</td>

​

​