Ich habe versucht, dies für eine Weile zur Arbeit zu bringen und nicht sicher, wie das Folgende zu tun ist. Meine Formularkomponente enthält untergeordnete Elemente, die sowohl reguläre HTML-Markups als auch Eingaben enthalten. Wenn das Kind eine Eingabe ist, möchte ich die Funktionen attachToForm und detachFromForm hinzufügen. Wenn es sich nicht um eine Eingabe handelt, möchte ich die Kinder weiterhin durchlaufen, um sicherzustellen, dass das Element kein untergeordnetes Eingabefeld hat. Ob das Element ein Eingang ist oder nicht, ich möchte immer noch, dass es auf meiner Seite erscheint, ich möchte nur die Funktionen zu den Eingängen hinzufügen.Durchfahren von Kinderkindern und Hinzufügen von Funktionen zu allen Eingaben, während andere Kinder unberührt bleiben
Das Problem ist, ich kann nur meine Funktion erhalten, nur die Eingänge zurückzugeben, die Etiketten und den Titel zu entfernen. Ich weiß, dass, weil ich nur Elemente mit Eingaben zu newChildren hinzufüge, aber wenn ich die anderen Elemente im else if Abschnitt schiebe, bekomme ich doppelte und ich kann an eine andere Weise denken, dies zu tun. Ich bin nicht sicher, ob ich grundlegendes JS nicht verstehe oder eine Gehirnlücke habe.
React.Children.forEach(children, function(child) {
var current = child;
if (child.props && child.props.name) {
this.newChildren.push(React.cloneElement(child, {
detachFromForm: this.detachFromForm,
attachToForm: this.attachToForm,
key: child.props.name
}));
} else if (child.props && child.props.children){
this.newChildren.push(child);
this.registerInputs(child.props.children);
} else {
*need to keep track of parent elements and elements that do not have inputs
}
}.bind(this));
Edit: Nicht sicher erforderlich, wenn aber das ist und beispielsweise Form im Durchqueren
return (
<Modal className="_common-edit-team-settings" title={`Edit ${this.props.team.name}`} isOpen={this.props.modalIsOpen && this.props.editTeamModal} onCancel={this.props.toggleEditTeamModal} backdropClosesModal>
<Form onSubmit={this.saveChanges}>
<FormSection className="edit-team-details" sectionHeader="Team Details">
<FormField label="Name">
<Input name="name" value={this.state.values.name} onChange={this.handleInputChange} type="text" placeholder={this.props.team.name}/>
</FormField>
<FormField label="Mission">
<Input name="mission" value={this.state.values.mission} onChange={this.handleInputChange} type="text" placeholder={this.props.team.kitMission || 'Kit Mission'} multiline />
</FormField>
</FormSection>
<FormSection className="privacy-settings" sectionHeader="Privacy Settings">
<FormField label="Included in global search results" >
<SlideToggle name="globalSearch" defaultChecked={this.state.values.globalSearch} onChange={this.handleCheckedChange} type="checkbox" />
</FormField>
<FormField label="Accessible by anyone" >
<SlideToggle name="public" defaultChecked={this.state.values.public} onChange={this.handleCheckedChange} type="checkbox" />
</FormField>
<FormField label="Secured with WitCrypt" >
<SlideToggle name="witcryptSecured" defaultChecked={this.state.values.witcryptSecured} onChange={this.handleCheckedChange} type="checkbox" />
</FormField>
</FormSection>
<FormSection sectionHeader="Participants">
{participantsList}
<div id="add-participant" className="participant" onClick={this.toggleAddParticipantModal}>
<span className="participant-avatar" style={{backgroundImage:'url(/img/blue_add.svg)'}}></span>
<span>Add a Participant</span>
<span className="add-action roll"><a></a></span>
</div>
</FormSection>
<Button type="hollow-primary" size="md" className="single-modal-btn" block submit>Save</Button>
</Form>
<AddParticipant people={this.props.people} toggleAddParticipantModal={this.props.toggleAddParticipantModal} modalIsOpen={this.props.modalIsOpen} toggleAddParticipantModal={this.toggleAddParticipantModal} addParticipantModal={this.state.addParticipantModal} />
</Modal>
);
Als Nebenwirkung ich folgendes tun wollen viel einfacher begann aber erhalten:
"Eigenschaft kann nicht hinzugefügt werden attachToForm, Objekt ist nicht erweiterbar"
Wenn jemand weiß warum, lass es mich wissen.
registerInputs: function (children) {
React.Children.forEach(children, function (child) {
if (child.props.name) {
child.props.attachToForm = this.attachToForm;
child.props.detachFromForm = this.detachFromForm;
}
if (child.props.children) {
this.registerInputs(child.props.children);
}
}.bind(this));
}