如何在 ArkTS 中编写响应式表单？

Question

探讨如何利用 ArkTS 的双向绑定特性开发动态响应的用户表单。

本文参与了 【 HarmonyOS NEXT 技术问答冲榜，等你来战！】欢迎正在阅读的你也加入。

Answer 1

在 ArkTS 中，响应式表单可以通过 @State 修饰符和绑定机制实现。以下是一个基本示例：

import { State } from '@ohos/state-management';

@State
let formData = {
    name: '',
    email: '',
};

function onInputChange(key: string, value: string) {
    formData[key] = value;
}

export default {
    build() {
        return (
            <Column>
                <TextField
                    value={formData.name}
                    placeholder="Enter name"
                    onChange={(value) => onInputChange('name', value)}
                />
                <TextField
                    value={formData.email}
                    placeholder="Enter email"
                    onChange={(value) => onInputChange('email', value)}
                />
                <Button onClick={() => console.log(formData)}>Submit</Button>
            </Column>
        );
    },
};

通过 @State 修饰的变量自动触发 UI 更新，实现响应式行为。