javascript - 我如何处理reactjs中的受控和不受控输入

Question

我有一个如下图所示的表单字段 产品字段是一个搜索字段，当用户单击建议选项时，其他表单字段会自动填写其他表单字段，用户也可以覆盖自动填写的内容，比如price。成功完成表单后，详细信息将添加到表格中。现在，当用户在自动填充后取消进程时，我面临一个挑战，它不会覆盖以前的值，当我使用 defaultValue 属性时会发生这种情况。因此，我尝试使用 value 属性和 onChange 处理程序，我只能在自动填充之前输入字段，这意味着用户无法在自动填充之后更改诸如价格之类的字段，所以我怎样才能最好地解决我的问题。

标签： javascriptreactjs

Answer 1

我找到了一种使用 vanilla javascript 与表单字段交互的方法。例子

const drug_details_from = React.useRef(null);
const [inputEl, setInputEl] = React.useState([]);

const handleSearchSelect = (values) => {
    const { form, qty, sellPrice, str, suppQty } = values;

    inputEl[1].value = qty;
    inputEl[2].value = formatAsMoney(sellPrice);
    inputEl[4].value = "1";
    inputEl[5].value = form;
    inputEl[7].value = suppQty;
    inputEl[8].value = "S";
 };