Struggling to adopt the react way of thinking, I'm facing an issue with invoking the .submit() method of the form component.
Within a material-ui Dialog, buttons are passed via the actions property. Now, I need to trigger the .submit() method of the Form component, which is nested inside the dialog, from the Actions component.
Should I pass the formRef up to the Dialog in order to then pass it down to the Actions? Is there perhaps a more idiomatic React approach that I am not grasping?
class FormDialog extends React.Component {
render() {
return (
<Dialog actions={<Actions />} >
<Form />
</Dialog>
)
}
}
const Actions = (props) => {
return (
<FlatButton
label="Submit"
onTouchTap={() => formRef.submit()}
/>
)
}
const Form = () => {
let formRef;
return (
<AutoForm
ref={ref => formRef = ref}
onSubmit={doc => db.save(doc)}
>
</AutoForm>
)
}