如何在不使用 onchange 方法的情況下獲取輸入字段的值

Question

我正在使用 react 在表單中生成一些項目。 我可以通過onchange() function 獲取該值，但是當我這樣做並傳遞給我的后端時，未分配默認值。 如何確保此defaultValue也與表單一起發送。

我嘗試使用提交表單並獲取 html 元素，但這不起作用並且不是推薦的方式。

這是我的代碼：

data.getChecklist.checklist_items.map((item, index) => {
    return <div>
        <p>ITEM: {item.info}</p> 

            <TextField
                name={`${index}`}
                required
                defaultValue ={item.default_text}
                onChange={(e) => handleChange(e)}
                label="text"
                fullWidth
                />
                {item.checklist_sub_items.map((subitem, subindex) => {
                    return<div>
                            <p>SUBITEM: {subitem.info}</p> 

                        <TextField
                                name={`${subindex}`}
                                required
                                defaultValue ={subitem.default_text}
                                onChange={(e) => handleChangeSubItem(e)}
                                label="text"
                                fullWidth
                            />
                    </div> 
            })} 
    </div>  
})

編輯：我希望它不使用onchange() function 因為用戶並不總是需要與該字段進行交互。

Answer 1

您可以將默認值作為參數傳遞給 onchange。

onChange={(e) => handleChangeSubItem(e, defaultValue)}

稍后在提交期間，您可以創建當前值或 defaultValue 的 object 或將 defaultValue 存儲在另一個變量中，這取決於您。