React/Redux Formular überreichen Requisiten an Kinder

Question

Ich habe eine Ansicht in meinem Projekt, wo ein Benutzer eine Liste von Seiten abrufen kann und auch eine neue Seite erstellen kann. Mein Code sieht wie folgt aus:

ELTERN COMPONENT (SEITEN)

class Pages extends Component { 
    render() { 
    return (
     <div className="pages container"> 
     <div className="pages"> 
      <ul> 
      <li> 
       <CreateNewPage projectId={ this.props.params.id } /> 
      </li> 
      <li>Map list of exisiting pages</li> 
      </ul> 
     </div> 
     </div> 
    ); 
    } 
} 

KIND COMPONENT (CREATE NEW PAGE)

class CreateNewPage extends Component { 
    handleFormSubmit({ pageName, projectId }) { 
    this.props.CreatePage({ pageName, projectId }); 
    } 

    render() { 
    const { handleSubmit, fields: { pageName, projectId } } = this.props; 

    return (
     <form onSubmit={ handleSubmit(this.handleFormSubmit.bind(this)) } > 
     <label>Create new page</label> 
     <input { ...pageName } type="text" placeholder="Project name" /> 
     <input { ...projectId } type="hidden" value={ this.props.projectId } /> 
     <button type="submit">Create new page</button> 
     </form> 
    ); 
    } 
} 

export default reduxForm({ 
    form: 'createPage', 
    fields: [ 'pageName', 'projectId' ] 
}, null, actions)(CreateNewPage); 

Seiten erhält eine ID als Stütze von React Router und ich möchte mach das für das Redux-Formular in meiner "Create New Page" -Komponente verfügbar, damit ich die Seite mit dem Projekt in meiner Datenbank verknüpfen kann.

Ich mache derzeit die Projekt-ID verfügbar, indem Sie es als Prop zu der "Create New Page" -Komponente übergeben und dann in einem versteckten Eingabefeld speichern.

Dies ist meine erste Redux-Anwendung, also will ich nur wissen, ob ich das richtig mache? Vielen Dank im Voraus.

Answer 1

Anstatt die Projekt-ID in einer versteckten Eingabe zu übergeben, konnten Sie sie nicht einfach als Argument in Ihrer createPage-Funktion übergeben?

this.props.createPage(projectId, { pageName }); 

Wo projectId ist richtige Antwort

Answer 2

Joshua Slate this.props.projectId werden konnte. Die projectId muss überhaupt kein Feld sein.

Auf einer pädagogischen Seite Notiz ... Versteckte Eingänge machen keinen Sinn in redux-form. Ich werde meine Antwort auf this question zitieren:

Das Konzept der versteckten Eingänge wirklich existiert nicht in der Redux-Form, als versteckte Eingänge auf der ye olde HTML Art und Weise basierte Formen der Übermittlung. A "versteckte Eingabe" in Redux-Form ist nur ein Feld, das in der Felder Liste erscheint (so wird es vorgelegt werden), aber das wird nicht zu einem Eingang gerendert. Ich tue dies für Primärschlüssel, wo meine Felder Liste ist ['id', 'name', 'email'], und ich render nur Eingaben für Name und E-Mail, aber alle drei eingereicht werden.