将用户输入的值替换为 React 中分配有状态的值

Posted 2023-03-21

【中文标题】将用户输入的值替换为 React 中分配有状态的值

【英文标题】：Replacing value input by user with value assigned with state in React

【发布时间】：2021-12-14 00:30:05

【问题描述】：

我有一个 reactstrap 输入字段

        <Input
          onChange=handlePriceInputChange
          type="number"
          defaultValue=price
          innerRef=register("price",  required: true )
        ></Input>

我在defaultValue 中填充了一个名为price 的默认"" 状态。

  const [price, setPrice] = useState("");

我用onChange中的函数设置了这个值

  const handlePriceInputChange = (ev) => 
    setPrice(parseInt(ev.target.value));
  ;

同时点击一些 div 容器会触发一个函数handleSelectedBox

  const handleSelectedBox = (ev) => 
    setSelected(ev.target.getAttribute("data-boxprice"));
    setPrice(parseInt(ev.target.getAttribute("data-price")));
  ;

当我手动填写输入字段，然后触发应该触发handleSelectedBox 的按钮时，price 的状态会发生变化，但客户端的值保持不变。

我如何强制 handleSelectedBox 更改输入中的值，即使该值是手动设置的？

【问题讨论】：

只用 value=price 而不是 defaultValue 不行吗？

如果我使用 value=price 那么我无法手动更改该值，已修复

哎呀，确实是这样，谢谢

哈哈酷没问题兄弟！

【参考方案1】：

所以答案是使用 value 而不是 defaultValue ：

        <Input
          onChange=handlePriceInputChange
          type="number"
          value=price
          innerRef=register("price",  required: true )
        ></Input>