In the onSubmit event, how to pass the TextField Value without any value passed by the form React JS

I am new to react js and react hook. I have three text fields in … Read more In the onSubmit event, how to pass the TextField Value without any value passed by the form React JS

I am new to react js and react hook.
I have three text fields in my form.
Ex: First Text Field value=5
Second Text Field value=3

Third Text Field value=FirstTextField-SecondTextField.

The first Text field value is the default value. But the second text field is editable. When I change the text field value. It’s automatically updated to (based on calculation) text field third.


    const formvalues = useForm({
        mode: 'onSubmit',
        reValidateMode: 'onChange',
        defaultValues: {
        workhrs:0,
        remainhrs:0,
        actualhrs:5
        },
        resolver: yupResolver(schema),
      });
      const { control, watch, reset, handleSubmit, onChange, formState, getValues } = methods;
    
    const [workhrsvalue, setWorkhrsValue]=useState();
    const [remainhrsvalue, setRemainhrsValue]=useState();
    const handleTextChanged = (e) => {
            var NewValue = parseFloat(e.target.value);
            setWorkhrsValue(NewValue);
            var remaininghrsValue=(parseFloat(actualhrs)-parseFloat(workhrs));
            setRemainhrsValue(remaininghrsValue);
          }
    const onSubmit = async (data) => {
        console.log(data);
    <FormProvider {...formvalues}>
            <form
              noValidate
              onSubmit={handleSubmit(onSubmit)}
              className="flex flex-col md:overflow-hidden"
            >
    <Controller
                            render={({ field }) => (
                                <TextField
                                    {...field}
                                    id="actualhrs"
                                    autoFocus={true}
                                    variant="outlined"
                                    placeholder="actualhrs"
                                />
                            )}
                            name="actualhrs"
                            defaultValue="5"
                            control={control}
                        />
    <Controller
                            render={({ field }) => (
                                <TextField
                                    {...field}
                                    id="workhrs"
                                    autoFocus={true}
                                    variant="outlined"
                                    placeholder="workhrs"
                                    onChange={e => {
                                        handleTextChanged(e)
                                        field.onChange(e)
                                      }}
                                />
                            )}
                            name="workhrs"
                            defaultValue=""
                            control={control}
                        />
                    <Controller
                            render={({ field }) => (
                                <TextField
                                    {...field}
                                    id="remainhrs"
                                    autoFocus={true}
                                    variant="outlined"
                                    placeholder="remainhrs"
                                />
                            )}
                            name="remainhrs"
                            defaultValue=""
                            control={control}
                        />
                        </form>
                        </FormProvider>

ExpectedResult

I need to pass the Textfield3(remainhrs) value to submit event. But remainhrs value always coming undefined. How to resolve that.

Source: React – Stack Overflow



Leave a Reply

Your email address will not be published. Required fields are marked *