如何在不使用 onchange 方法的情况下在 react 中获取输入字段的值

问题描述

我正在使用 react 在表单中生成一些项目。我可以通过 onchange() 函数获取该值，但是当我执行此操作并将其传递给我的后端时，未分配默认值。我如何确保此 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() 函数，因为用户不必总是与字段交互。

解决方法

您可以在 onchange 中将默认值作为参数传递。

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

稍后在提交期间，您可以创建一个当前值或 defaultValue 的对象，或者将 defaultValue 存储在另一个变量中，这取决于您。