我使用reactjs,nodejs和mysql ..从数据库中获取数据。现在,我的挣扎是我只需要根据搜索值显示行(可能不包括提交按钮(如Google搜索))
这是我的NodeJS提取链接,因此,如果我输入http:\ localhost \ productlist \ 3,则它将仅在NodeJS中显示第3个产品,但我也想通过搜索框在reactjs中实现相同的功能
app.get("/productslist/:idaddproducts", (req, res) => {
const id = req.params.idaddproducts
console.log(id)
connection.query("SELECT * FROM `addproducts` where idaddproducts = ? ",id,(err, rows) => {
if (!err) console.log(rows), res.json({ data: rows });
//data variable is not mandatory but inorder to pass the result we need it
else console.log(err);
// connection.end()
});
});
这是我的React JS代码
export default function MaterialTableDemo() {
const initialState = {
idaddproducts: "",
productName: "",
productId: "",
productBrand: "",
productQuantity: "",
productPrice: "",
productType: ""
};
const [poName, pnName] = React.useState(initialState);
const handleName = e => {
e.preventDefault();
pnName({ ...poName, [e.target.name]: e.target.value });
console.log(poName);
};
async function handleTable(e) {
const res = await fetch("http://localhost:4000/productslist/:id");
const data = await res.json();
pnName(data.data);
console.log(data.data);
}
useEffect(() => {
handleTable();
}, []);
const classes = useStyles();
return (
<form className={classes.root} noValidate autoComplete="off" align="center">
<div className={classes.formGroup}>
<FormControl>
<Input
type="search"
label="Product ID"
variant="outlined"
size="small"
placeholder="Enter Product ID"
value={poName.idaddproducts}
name="idaddproducts"
onChange={handleName}
/>
</FormControl>
{poName.length &&
poName.map(v => {
return (
<h4 key={v.idaddproducts}>
{v.productName}
{v.productId}
{v.productBrand}
{v.productQuantity}
{v.productPrice}
{v.productType}
</h4>
);
})}
</div>
</form>
);
}
任何帮助将不胜感激
async function handleTable(e) {
const id = e.target.value;
const res = await fetch("http://localhost:4000/productslist/" + id);
const data = await res.json();
pnName(data.data);
console.log(data.data);
}
尝试这样使用。