React - übergeben Ref an Eltern

Question

Ich versuche zu denken, die Art der Reaktion, aber ich kann keine Lösung finden, wie die .submit() Methode der Formularkomponente aufgerufen wird.

Ich habe eine Material-UI Dialog, wo ich die Tasten über Aktionen-Eigenschaft übergeben müssen. Von dieser Aktionskomponente möchte ich die .submit()-Methode der Form-Komponente aufrufen, die ein Kind des Dialogs ist.

Muss ich die formRef an den Dialog übergeben, um sie dann an die Aktionen zu übergeben, und wie würde ich das tun? Oder gibt es eine Reaction Weise Ich verpasse es?

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

Alle Tasten in einer Form, die die Form type="submit", und klicken Sie auf einen von ihnen die <form /> ‚s onSubmit Handler einreichen auslösen sollte. Es besteht keine Notwendigkeit, eine Referenz zu übergeben.

Es gibt ein paar React-Wege-Noten hier:

• Wenn Sie Dinge passieren „nach oben“ und dann wieder „nach unten“, um einen Komponentenbaum, sind Sie wahrscheinlich nicht das Problem richtig nähern.
• Komponenten sollten niemals Methoden auf anderen Komponenten aufrufen.
• Sofern Sie nicht genau wissen, wann sie benötigt werden, sollten Referenzen auf DOM-Elemente nur innerhalb der Komponente referenziert werden, die die Referenz besitzt.