时间戳

首页 > 解决方案 > 如何更改输入之间的状态？

reactjs - 如何更改输入之间的状态？

问题描述

我正在尝试制作一个计算税收和折扣的应用程序，但我无法弄清楚如何在各州之间建立沟通。由于输入之间的变化将是连续的，因此我为每个收件箱提供了 onkeyup 事件。每次调用此事件时，被调用的函数都必须执行必要的操作。例如，当我输入quantity 和unitPrice 值时，它会将这两个值相乘并将它们分配给goodsServiceAmt 值。该应用程序还具有添加和删除行的能力。每一行的计算应该是自己的。我试图用 handleQuantity 函数来做，状态正在更新，但输入中的值没有改变。


const App = () => {
  const [mainData, setMainData] = useState([
    {
      id: 1,
      quantity: "",
      unitPrice: "",
      discRate: "",
      discAmt: "",
      kdvAmt: "",
      kdvRate: "",
      goodsServiceAmt: "",
    },
  ]);

  const deleteRow = (e, i) => {
    e.preventDefault();
    const newArr = [...mainData];
    console.log(i);
    newArr.splice(i, 1);
    setMainData(newArr);
  };

  const handleChangeInput = (e, i) => {
    const values = [...mainData];
    values[i][e.target.name] = e.target.value;
    setMainData(values);
  };

  const addRow = () => {
    const id = mainData.length ? mainData.length + 1 : 0;
    console.log(id);
    setMainData([
      ...mainData,
      {
        id,
        quantity: "",
        unitPrice: "",
        discRate: "",
        discAmt: "",
        kdvAmt: "",
        kdvRate: "",
        goodsServiceAmt: "",
      },
    ]);
  };

  const handleQuantity = (e, i) => {
    const deger = [...mainData];
    deger[i].unitPrice = e.target.value;
    setMainData(deger);
  };

  return (
    <div style={{ display: "flex", flexDirection: "column" }}>
      {mainData.map((v, i) => (
        <form key={i} style={{ display: "flex" }}>
          <span style={{ width: "50px", height: "50px" }}>{v.id}</span>
          <div className="input-cont">
            <label htmlFor="quantity">quantity</label>
            <input
              type="text"
              name="quantity"
              value={mainData.quantity}
              onChange={(e) => handleChangeInput(e, i)}
              onKeyUp={(e) => handleQuantity(e, i)}
            />
          </div>
          <div className="input-cont">
            <label htmlFor="unitPrice">unitPrice</label>
            <input
              type="text"
              name="unitPrice"
              value={mainData.unitPrice}
              onChange={(e) => handleChangeInput(e, i)}
            />
          </div>
          <div className="input-cont">
            <label htmlFor="discRate">discRate</label>
            <input
              type="text"
              name="discRate"
              value={mainData.discRate}
              onChange={(e) => handleChangeInput(e, i)}
            />
          </div>
          <div className="input-cont">
            <label htmlFor="discAmt">discAmt</label>
            <input
              type="text"
              name="discAmt"
              value={mainData.discAmt}
              onChange={(e) => handleChangeInput(e, i)}
            />
          </div>
          <div className="input-cont">
            <label htmlFor="kdvRate">kdvRate</label>
            <input
              type="text"
              name="kdvRate"
              value={mainData.kdvRate}
              onChange={(e) => handleChangeInput(e, i)}
            />
          </div>
          <div className="input-cont">
            <label htmlFor="kdvAmt">kdvAmt</label>
            <input
              type="text"
              name="kdvAmt"
              value={mainData.kdvAmt}
              onChange={(e) => handleChangeInput(e, i)}
            />
          </div>
          <div className="input-cont">
            <label htmlFor="goodsServiceAmt">goodsServiceAmt</label>
            <input
              type="text"
              name="goodsServiceAmt"
              value={mainData.goodsServiceAmt}
              onChange={(e) => handleChangeInput(e, i)}
            />
          </div>
          <button onClick={(e) => deleteRow(e, i)}>delete</button>
        </form>
      ))}
      <button onClick={addRow}>add row</button>
      <button onClick={() => console.log(mainData)}>clg</button>
    </div>
  );
};

export default App;

标签： reactjsreact-native

解决方案

发生这种情况是因为您像对象一样访问输入中的数据，但在您的 useState 中它是一个数组。

将您的使用状态更改为：

const [mainData, setMainData] = useState({
      id: 1,
      quantity: "",
      unitPrice: "",
      discRate: "",
      discAmt: "",
      kdvAmt: "",
      kdvRate: "",
      goodsServiceAmt: "",
});

或将输入中的值更改为：

value={mainData[0].quantity}

推荐阅读