javascript - 按名称更新不受控制的输入在 React 组件中

Question

我的反应组件中有以下代码

<form ref={form}>
                    <IonItem>
                        <IonLabel>Name</IonLabel>
                        <IonInput defaultValue="" name="Name"></IonInput>
                    </IonItem>
                    <IonItem>
                        <IonLabel>Domain Code</IonLabel>
                        <IonInput defaultValue="" name="Code"></IonInput>
                    </IonItem>
</form>

我想将具有相同字段名称的 props.domain 对象绑定{ Name: string, Code: string }到表单输入中，例如作为输入名称

const elements = form.current.elements;
                Object.entries(props.domain).forEach(x => {
                    const [name, value] = x;
                    const input = elements.namedItem(name)
                    if(input instanceof Element) {
                        input.setAttribute('value', value);
                    }
                })

如果我console.log(input)可以看到它的 value 属性已正确更新为来自域对象的值，但该字段仍然看起来是空的。如果我console.log(form.current)显示表单的输入没有值，就像表单不知道输入的值已更新。我怎样才能做到这一点？我想让它不受控制，因为我有很多输入并且不想为所有输入添加处理程序我宁愿只使用 Formik 或其他一些库

PS 我来自 Angular 背景，这对于反应形式来说是轻而易举的事。我是反应新手

标签： javascriptreactjsionic-framework