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

Question

我有一个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更改输入中的值，即使该值是手动设置的?

Answer 1

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

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