使用尾数中的贴图渲染的输入字段无效

Question

我正在尝试制作一个表单生成器，它采用字段和表单(来自useForm)来简单地映射到字段数组上，并根据字段类型返回输入，并将字段注册到mantine表单，如｛…form.getInputProps(name)｝，如果道具发送到FormBuilderComponent，则为form。但是这样我就无法与输入字段进行交互。请帮帮我。这是指向codesandbox的链接。https://codesandbox.io/s/awsome-almeida-58e4nc？file=/src/App.tsx我错过了什么？

const FormBuilder = ({ fields, form }) => {
const theme = useMantineTheme();
console.log(form);
const mappedFields = fields.map((field) => {
const {
type,
placeholder,
name,
label,
options,
col,
pattern,
required,
errorMessage,
minLength,
maxLength
} = field;
if (type === "select") {
return (
<Select
transition="pop-bottom-left"
transitionDuration={80}
transitionTimingFunction="ease"
label={label}
data={options}
placeholder={placeholder}
required={required}
/>
);
}
if (type === "text") {
return (
<Grid.Col {...form.getInputProps(name)} span={col} key={randomId()}>
<TextInput
placeholder={placeholder}
label={label}
// required={required}
{...form.getInputProps(name)}
/>
</Grid.Col>
);
}
if (type === "date-picker") {
return (
<Grid.Col span={col} {...form.getInputProps(name)} key={randomId()}>
<DatePicker
placeholder={placeholder}
label={label}
withAsterisk={required}
// {...form.getInputProps(name)}
/>
</Grid.Col>
);
}
if (type === "switch") {
return (
<Grid.Col span={col} key={randomId()}>
<Switch
color="teal"
size="md"
label={label}
// required={required}
// checked
thumbIcon={
true === true ? (
<IconCheck
size={12}
color={theme.colors.teal[theme.fn.primaryShade()]}
stroke={3}
/>
) : (
<IconX
size={12}
color={theme.colors.red[theme.fn.primaryShade()]}
stroke={3}
/>
)
}
/>
</Grid.Col>
);
}
if (type === "number") {
return (
<Grid.Col span={col} key={randomId()}>
<NumberInput
placeholder={placeholder}
label={label}
withAsterisk={required}
// minLength={minLength}
// maxLength={maxLength}
/>
</Grid.Col>
);
}
});
return <>{mappedFields}</>;
};

export default function App() {
const form = useForm();
return (
<MantineProvider withGlobalStyles withNormalizeCSS>
<form>
<Grid>
<FormBuilder fields={fields} form={form} />

<Grid.Col span={12}>
<Input placeholder='hy' {...form.getInputProps('ghost')} />
</Grid.Col>
<Grid.Col span={12}>
<Group position='right' mt={'md'}>
<Button type={'submit'}>Next</Button>
</Group>
</Grid.Col>
</Grid>
</form>
</MantineProvider>
);
}

我想构建一个具有多个输入字段的表单，并读取它的值并从父组件验证它们。

Answer 1

它与尾数形式无关。我使用{ randomId } from "@mantine/hooks"为映射项目生成一个唯一密钥。但它在每次渲染时都会生成新的关键帧，因此react无法跟踪更改。

密钥必须是唯一的，并且应在重新渲染期间保持不变。

Answer 2

这就是我在代码中看到的内容。

export default function App() {
const form = useForm();
return (
...
);
}

你做这件事的方式有问题，所以表格不起作用。也就是说，您创建了一个没有initialValues的表单。换句话说，表单是空的。此外，在<FormBuilder />生成器组件中，您没有为表单设置任何字段，但正在从表单中读取一些字段。解决这个问题的方法，就是像一样使用initialize the fields

const form = useForm({
initialValues: {
email: '',
termsOfService: false,
},
validate: {
email: (value) => (/^S+@S+$/.test(value) ? null : 'Invalid email'),
},
});

根据文件

或者在表单生成器上使用form.setFieldValue方法，该方法不确定是否有效。最成功的方法是在将表单传递到FormBuilder组件之前初始化表单中的所有潜在字段。

如果你想使用与你的字段阵列(即)中相同的字段

const fields = [
{
name: "gender",
...
},
{
name: "full_name",
...
},
{
name: "date_of_birth",
...
},
];

const initialValues = fields.reduce((acc, field) => {
acc[field.name] = "";
return acc;
}, {});
const form = useForm({
initialValues: initialValues
})

通过这种方式，您将获得基于表单给定字段的初始值。