React-将ref传递给父对象

Question

I am trying to think the react way but I can't find a solution on how to invoke the .submit() method of the form component.

I have a material-ui Dialog where I have to pass the buttons via actions property. From this action component, I would like to invoke the .submit() method of the Form component, which is a child of the dialog.

Do I have to pass the formRef up to the Dialog to pass it then to the Actions, and how would I do that? Or is there any React way I am missing out on?

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>
    )
} 

Answer 1

Any buttons inside a form that submit the form should be type="submit" , and clicking on any of them will trigger the <form /> 's onSubmit handler. There's no need to pass around a reference.

There's a few React-way notes here:

• If you have to pass things "up" and then back "down" a component tree, you're probably not approaching the problem correctly.
• Components should never call methods on other components.
• Unless you really know when they're needed, refs to DOM elements should only be referenced inside the component owning the ref.