绑定数组

使用表单绑定 API 操作数组。

重复数组项模板
添加和删除数组项

本页面解释了在使用表单绑定构建TypeScript表单视图时如何处理数组。设想有一个具有如下结构的Java Bean的表单：

Source code

Group.java
/**
 * 带有数组字段的示例bean
 */
public class Group {
    ...

    public Person[] getPeople() {
        ...
    }

    public void setPeople(Person[] people) {
        ...
    }
}

重复数组项模板

处理数组时常见的需求是遍历数组项并为每个数组项实例化模板。通过表单绑定，数组模型可以被迭代。您可以使用 useFormArrayPart 钩子来遍历模型，以及获取和设置数组的值。

由于您还需使用 useFormPart 钩子为每个项获取 field 函数，因此您需要创建一个用于数组项模板的组件。

Source code

tsximport { useForm, useFormArrayPart, useFormPart } from '@vaadin/hilla-react-form';
import { NumberField, TextField } from '@vaadin/react-components';
import GroupModel from '.../GroupModel';
import PersonModel from '.../PersonModel';

function PersonForm({ model }: { model: PersonModel }) {
    const { field } = useFormPart(model);

    return (
        <div>
            <TextField {...field(model.fullName)} />
            <NumberField {...field(model.age)} />
        </div>
    );
}

export default function GroupFormView() {
    const { field, model } = useForm(GroupModel);
    const { items} = useFormArrayPart(model.people);

    return (
        <>
            <TextField {...field(model.name)} />
            {items.map((person, index) => (
                <PersonForm key={index} model={person} />
            ))}
        </>
    );
}

添加和删除数组项

您可以使用 useFormArrayPart 提供的 value 和 setValue 函数修改数组值。

Source code

tsximport { useForm, useFormArrayPart, useFormPart } from '@vaadin/hilla-react-form';
import { Button, NumberField, TextField } from '@vaadin/react-components';
import GroupModel from '.../GroupModel';
import PersonModel from '.../PersonModel';

function PersonForm({ model, remove }: { model: PersonModel, remove: () => void }) {
    const { field } = useFormPart(model);

    return (
        <div>
            <TextField {...field(model.fullName)} />
            <NumberField {...field(model.age)} />
            <Button onClick={remove}>Remove</Button>
        </div>
    );
}

export default function GroupFormView() {
    const { field, model } = useForm(GroupModel);
    const { items, value, setValue } = useFormArrayPart(model.people);

    return (
        <>
            <TextField {...field(model.name)} />
            {items.map((person, index) => (
                <PersonForm key={index} model={person} remove={() => setValue(value!.filter((_, i) => i !== index))} />
            ))}
            <Button onClick={() => setValue([...(value ?? []), PersonModel.createEmptyValue()])}>Add person</Button>
        </>
    );
}

Docs

Docs

绑定数组

重复数组项模板

添加和删除数组项