Javascript 如何在react函数挂钩中创建按钮组件，该挂钩可以接受输入以及加/减按钮值

我正在尝试制作一个react按钮组件，该组件具有加减按钮和一个输入选项，用于插入所需的数量。我希望输入与加减按钮一起工作。最后我有一个添加按钮&当我单击添加按钮时，它应该在购物车中得到更新

我面临的问题是：

输入未按预期工作。我无法更正或输入

我不想在输入字段中显示0，但是如果我

setCount（“”）它将使初始状态为空&加号按钮将无法按要求工作

如何在

handleValueChange（）

中显示/包含句柄加减错误消息

我希望对代码进行重构，使其尽可能少的行数，并且应该能够理解它（而不是压缩）

我非常感谢为其改进而添加的任何附加代码

链接到沙盒--

如果可能的话，我可以参考一个工作沙箱，这将非常有帮助

我的代码如下：

//App.jsx

import React, { useState } from "react";
import Qbutton from "./Qbutton";

function App() {
  return (
    <div>          
      <Qbutton />
    </div>
  );
}

export default App;

import React，{useState}来自“React”；
从“/Qbutton”导入Qbutton；
函数App（）{
返回(
);
}
导出默认应用程序；

//QuantityButton.jsx

import React, { useState } from "react";

function Qbutton(props) {
  const [count, setCount] = useState(0);
  const [error, setError] = useState(null);

  const Qty = 12;

  function handlePlus() {
    if (count < Qty) {
      setCount(count + 1);
      setError(null);
    } else {
      setError("No stock");
    }
  }

  function handleMinus() {
    if (count > 0) {
      setCount(count - 1);
      setError(null);
    } else {
      setError("No items in Cart");
    }
  }

  function handleValueChange(e) {
    const x = Number(e.target.value);
        
    if (isNaN(x) || x < 1 || x > Qty) {
      setError(
        "Input not valid"
      ); /*How to display/include handle plus & minus Error messages*/
    } else {
      setCount(x);
      setError("Qty updated");
    }
    console.log(x);
  }

  function SubmitQty(e) {
    setError("Items Added to Cart");        
    setCount(0);
    /* Delete setCount if u want the selected Quantity to show up.. Set it "0" if required it to get cleared*/
    e.preventDefault();
  }

  console.log(count);
  return (
    <div className="btnWrapper">
      <h1> Quantity Button </h1>

      <div className="counterDisplay">
        <button
          style={{ borderRadius: "25px 0px 0px 25px" }}
          onClick={handleMinus}
        >
          -
        </button>
        <input
          type="text"
          min="0"
          value={count}
          onClick={() => setCount(0)}
          onChange={handleValueChange}
        />
        <button onClick={handlePlus}>+</button>
        <button
          className="AddBtn"
          style={{ borderRadius: "0px 25px 25px 0px" }}
          onClick={SubmitQty}
        >
          Add
        </button>
      </div>
      {error}
    </div>
  );
}

export default Qbutton;

import React，{useState}来自“React”；
功能按钮（道具）{
const[count，setCount]=useState（0）；
const[error，setError]=useState（null）；
常数数量=12；
函数handlePlus（）{
如果（计数<数量）{
设置计数（计数+1）；
设置错误（空）；
}否则{
setError（“无库存”）；
}
}
函数handleMinus（）{
如果（计数>0）{
设置计数（计数-1）；
设置错误（空）；
}否则{
设置错误（“购物车中没有商品”）；
}
}
功能handleValueChange（e）{
常数x=数量（即目标值）；
如果（isNaN（x）| | x<1 | | x>数量）{
设置错误(
“输入无效”
)；/*如何显示/包含句柄加减错误消息*/
}否则{
设置计数（x）；
设置错误（“数量更新”）；
}
控制台日志（x）；
}
功能提交（e）{
设置错误（“添加到购物车的项目”）；
设置计数（0）；
/*如果要显示所选数量，请删除setCount。如果需要清除，请将其设置为“0”*/
e、 预防默认值（）；
}
控制台日志（计数）；
返回(
数量按钮
-
setCount（0）}
onChange={handleValueChange}
/>
+
添加
{错误}
);
}
导出默认QQ按钮；

App.js
从“React”导入React，{useState}；
从“/Qbutton”导入Qbutton；
函数App（）{
//你应该在Qbutton中映射数量。
const[cart，setCart]=useState（[]）；
函数附加项（newItem）{
console.log（newItem，“newitemm”）
setCart（（prevNotes）=>{
返回[新项目]；
});
}
返回(
购物车中的项目：{Cart+“”}
);
}
导出默认应用程序；
QtButton.js
从“React”导入React，{useState}；
功能按钮（道具）{
const[count，setCount]=useState（null）；
const[error，setError]=useState（null）；
函数handlePlus（）{
如果（计数===null | |计数===“”）{
设置计数（1）；
}否则{
设置计数（计数+1）；
设置错误（空）；
}
}
函数handleMinus（）{
如果（计数>0）{
设置计数（计数-1）；
设置错误（空）；
}否则{
setError（“请输入有效数字”）；
}
}
功能handleValueChange（e）{
e、 预防默认值（）；
常数re=/^[0-9\b]+$/；
if（e.target.value==“”| | re.test（e.target.value））{
常数x=数量（即目标值）；
设置计数（x）；
设置错误（“数量更新”）；
}否则{
setError（“您的输入无效”）；
}
}
功能提交（e）{
e、 预防默认值（）；
if（计数！==0&&count！==null）{
道具。onAdd（计数）；
设置错误（“添加到购物车的项目”）；
集合计数（“”）；
}否则{
setError（“请输入有效数字”）；
}
/*如果要显示所选数量，请删除setCount。将其设置为“0”
如果需要，它将被清除*/
}
返回(
数量按钮
-
setCount（null）}
onChange={handleValueChange}
/>
+
添加
{错误}
);
}
导出默认QQ按钮；

Hi Kaliraj，感谢您抽出时间查看我的代码。当我在输入中输入1，然后添加它时；它会添加到购物车中，但如果我按下+按钮，它会增加1、11、111，依此类推。如果数量较少，我确实需要“无库存”消息。@Bhushanayak请检查上述代码，增量1、11、111等已经修复，代码上没有“无库存”消息。我希望这能解决你的一些问题。。请参阅，我们正在输入onClick中设置setCount（null）。因此，当我们按下递增按钮时，它必须递增一个null。。这是一个错误。。要进行分析，只需输入一些数字，然后按Add。现在，无需键入任何内容，只需按两次增量按钮。。它会告诉你我想澄清什么。您可以查看此链接以检查您的答案@Bhushanayak现在请检查上面的代码，我做了一些编辑。希望它能帮助你

App.js

import React, { useState } from "react";

import Qbutton from "./Qbutton";

function App() {
  // U should map the Qty in Qbutton.
  const [cart, setCart] = useState([]);

  function addItem(newItem) {
    console.log(newItem , "New Itemm")
    setCart((prevNotes) => {
      return [newItem];
    });
  }

  return (
    <div>
      <h1>Items in Cart: {cart + ""} </h1>
      <Qbutton onAdd={addItem} qty={6} />
    </div>
  );
}

export default App;






QtButton.js

import React, { useState } from "react";

function Qbutton(props) {
  const [count, setCount] = useState(null);
  const [error, setError] = useState(null);

  function handlePlus() {
    if(count === null || count === ""){
      setCount(1);
    } else {
      setCount(count + 1);
      setError(null);
    }
  }

  function handleMinus() {
    if (count > 0) {
      setCount(count - 1);
      setError(null);
    } else {
      setError("Please Enter a Valid Number");
    }
  }

  function handleValueChange(e) {
    e.preventDefault();
    const re = /^[0-9\b]+$/;
    if (e.target.value === "" || re.test(e.target.value)) {
      const x = Number(e.target.value);
      setCount(x);
      setError("Qty updated");
    } else {
      setError("Your input is not valid");
    }
  }

  function SubmitQty(e) {
    e.preventDefault();
    if (count !== 0 && count !== null) {
      props.onAdd(count);
      setError("Items Added to Cart");
      setCount("");
    } else {
      setError("Please Enter a Valid Number");
    }
    /* Delete setCount if u want the selected Quantity to show up.. Set it "0" 
      if required it to get cleared*/
  }

  return (
    <div className="btnWrapper">
      <h1> Quantity Button </h1>

      <div className="counterDisplay">
        <button
          style={{ borderRadius: "25px 0px 0px 25px" }}
          onClick={handleMinus}
        >
          -
        </button>
        <input
          type="text"
          min="0"
          value={count}
          onClick={() => setCount(null)}
          onChange={handleValueChange}
        />
        <button onClick={handlePlus}>+</button>
        <button
          className="AddBtn"
          style={{ borderRadius: "0px 25px 25px 0px" }}
          onClick={SubmitQty}
        >
          Add
        </button>
      </div>
      {error}
    </div>
  );
}

export default Qbutton;