React Hook Forms Controller 问题

Question

I am quiet new to React Hook Forms. I am trying integrate Material UI with react hook forms. I am avoiding the use of normal submit rather using onClick on a button to trigger submit, I am using controller but for some reason when I submit my values always reflect default values and not the actual values on the input.

 <Controller name={name} control={control} defaultValue={defaultValue} render={() => ( <QControl uiProp={uiProp} context={context} handleChange={handleChange} /> )} />

 <Button type="submit" className="form-actions" variant="contained" color="primary" startIcon={<SaveIcon />} onClick={onSubmission} >

 const { control, handleSubmit } = useForm(); const onSubmit = (data) => console.log(data); const onSubmission = handleSubmit(onSubmit);

Answer 1

I'm looking through the Material UI docs and I can't find the Controller component, just the FormControl component.

I'm not familiar with Material UI, but I know about React and it doesn't seem that you have any onChange functions that are updating the values from your default, so the JS values would only be the default when you use the onSubmit .

Answer 2

I figured it out. The default Value prop on the controller then passes it as a value to the material ui component in props of the render prop.