reactjs - MUI NativeSelect blocks submit react hook form - Stack Overflow

admin管理员组

文章数量:1122832

I want to submit my form every time a change is made (when the value selected in a select is different for example).

But when I use NativeSelect from MUI, I can't do it..

Here is my code :

const onSubmit = (data: UpdateProspectNeufType) => console.log(data);

    useEffect(() => {
        const subscription = watch((_value, {name, type}) => {
            if (type !== "change" || name === undefined) return;
            handleSubmit(onSubmit)();
        });
        return () => subscription.unsubscribe()
    }, [handleSubmit, watch]);

<Controller
                        control={control}
                        defaultValue={null}
                        name={"typeMaison"}
                        render={({field}) => (

                                <NativeSelect {...field} id={"typeMaison"} onChange={e => field.onChange(e.target.value)} value={field.value}>
                                    {typesMaison.map((typeMaison) => (
                                        <option key={typeMaison.id} value={typeMaison.id}>{typeMaison.libelle}</option>
                                    ))}
                                </NativeSelect>

                        )}
                    />

I would be very grateful for your help

However, if I remove the native it works but I really want to use NativeSelect or Select with native=true

I want to submit my form every time a change is made (when the value selected in a select is different for example).

But when I use NativeSelect from MUI, I can't do it..

Here is my code :

const onSubmit = (data: UpdateProspectNeufType) => console.log(data);

    useEffect(() => {
        const subscription = watch((_value, {name, type}) => {
            if (type !== "change" || name === undefined) return;
            handleSubmit(onSubmit)();
        });
        return () => subscription.unsubscribe()
    }, [handleSubmit, watch]);

<Controller
                        control={control}
                        defaultValue={null}
                        name={"typeMaison"}
                        render={({field}) => (

                                <NativeSelect {...field} id={"typeMaison"} onChange={e => field.onChange(e.target.value)} value={field.value}>
                                    {typesMaison.map((typeMaison) => (
                                        <option key={typeMaison.id} value={typeMaison.id}>{typeMaison.libelle}</option>
                                    ))}
                                </NativeSelect>

                        )}
                    />

I would be very grateful for your help

However, if I remove the native it works but I really want to use NativeSelect or Select with native=true

• reactjs
• typescript
• material-ui
• react-hook-form

Share Improve this question Follow asked Nov 21, 2024 at 12:12 Matteo CascianoMatteo Casciano 111 bronze badge

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

If you really want to trigger the event everytime, I would recommend to remove the defaultValue and then just do the handleSubmit each time the onChange triggers, so it would look something like this:

<Controller
                control={control}
                name={"typeMaison"}
                render={({ field }) => (
                    <NativeSelect
                        {...field}
                        id={"typeMaison"}
                        onChange={(v) => {
                            field.onChange(v.target.value);
                            handleSubmit(onSubmit)();
                        }}
                        value={field.value}
                    >
                        {typesMaison.map((typeMaison) => (
                            <option key={typeMaison.id} value={typeMaison.id}>
                                {typeMaison.libelle}
                            </option>
                        ))}
                    </NativeSelect>
                )}
            />

I have done a test locally with success. You also omit the useEffect stuff, so it only fires on the onChange fn. Hopes this helps you.

本文标签： reactjsMUI NativeSelect blocks submit react hook formStack Overflow