如何使用帶有動態引數的useForm暫存器？

我想使用 react-hook-form 創建一個表單，但我遇到了問題。正如我發現的，v7 有一個很大的變化，所以我用作參考的代碼不起作用。我試圖修改它，我發現問題出在注冊上，但我無法動態傳遞該名稱引數。

我的主要組件。

import React from 'react';
import i18next from 'i18next';

import { Button, Grid, Typography } from '@material-ui/core';
import { useForm, FormProvider } from 'react-hook-form';
import { Link } from 'react-router-dom';

import FormInput from './CustomTextField'

const AddressForm = ({ next }) => {
    const methods = useForm();

    return (
        <>
            <Typography variant="h6" gutterBottom>
                {i18next.t('shipping_address')}
            </Typography>
            <FormProvider {...methods}>
                <form onSubmit={methods.handleSubmit((data) => {
                    console.log(data);
                    next({ ...data })})}>
                    <Grid container spacing={3}>
                        <FormInput required register={methods.register} name='lastName' label={i18next.t('last_name')} />
                        <FormInput required register={methods.register} name='firstName' label={i18next.t('first_name')} />
                        <FormInput required register={methods.register} name='email' label={i18next.t('mail')} />
                        <FormInput required register={methods.register} name='zip' label={i18next.t('zip_code')} />
                        <FormInput required register={methods.register} name='city' label={i18next.t('city')} />
                        <FormInput required register={methods.register} name='address1' label={i18next.t('address_1')} />
                    </Grid>
                    <br />
                    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                        <Button component={Link} to="/cart" variant="outlined">
                            {i18next.t('back_to_cart')}
                        </Button>
                        <Button type="submit" variant="contained" color="primary">
                            {i18next.t('next_step')}
                        </Button>
                    </div>
                </form>
            </FormProvider>
        </>
    )
}

export default AddressForm

CustomTextField 組件：

import React from 'react';
import { TextField, Grid } from '@material-ui/core';
import { useFormContext, Controller } from 'react-hook-form';

const CustomTextField = ({ name, label, register, required}) => {
    const { control } = useFormContext();

    return (
        <Grid item xs={12} sm={6}>
            <Controller 
                control={control}
                name={name}
                render = {(field) => (
                    <TextField
                        {...register({name})} // <--- It is not working like this
                        label={label}
                        required={required}
                    />
                )}
            />
        </Grid>
    )
}

export default CustomTextField

通過檔案：https : //react-hook-form.com/api/useform/register

它將輸入欄位的名稱作為引數，如果我將它作為字串傳入，它作業正常。如何將name的值作為引數傳遞給register()函式？

uj5u.com熱心網友回復：

問題是你正在混合 RHF<Controller />和register. 由于 Mui<TextField />是一個外部受控組件，您應該使用<Controller />. 查看此處的檔案以獲取更多資訊。

const CustomTextField = ({ name, label, register, required}) => {
    const { control } = useFormContext();

    return (
        <Grid item xs={12} sm={6}>
            <Controller 
                control={control}
                name={name}
                render={({ field: { ref, ...field } }) => (
                    <TextField
                        {...field}
                        inputRef={ref}
                        label={label}
                        required={required}
                    />
                )}
            />
        </Grid>
    )
}

如果您真的想在register此處使用，則必須洗掉包裝<Controller />并將 aname作為字串傳遞，而不是像您現在所做的那樣作為物件傳遞。但是我建議您使用，<Controller />因為register您正在失去ref為您的<TextField />輸入元素設定正確的功能，因為它是通過inputRefprop鏈接的，而不是使用refRHFregister使用的。

const CustomTextField = ({ name, label, register, required}) => {
    const { control } = useFormContext();

    return (
        <Grid item xs={12} sm={6}>
            <TextField
                {...register(name)}
                label={label}
                required={required}
            />
        </Grid>
    )
}

標籤：反应 形式 材质-ui 反应钩形

上一篇：反應中的提交

下一篇：禁止在我的網站上使用不適當的用戶名