Réagir les accessoires changeants sur les petits-enfants: l'objet n'est pas extensible / l'arbre traversant réagit aux enfants

Je suis à la suite d'un tutoriel et ne peut pas obtenir le code suivant à exécuter.
Lorsque j'exécute le code suivant, je reçois l'erreur Can't add property attachToForm, object is not extensible. Sont vous n'avez plus de permis de changer l'enfant d'accessoires de cette façon (c'est à dire. avec l'enfant.accessoires de jeu.clé = valeur)? Si non pouvez-vous voir un meilleur moyen de l'ajout d'une fonction imbriquée enfants uniquement si l'élément est un input?

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

Je suis en utilisant es6 si cela change quelque chose, mais le tutoriel peut être trouvé ici: http://christianalfoni.github.io/javascript/2014/10/22/nailing-that-validation-with-reactjs.html

FormComponent:

'use strict';
import React from 'react';
import BaseComponent from '@client/base-component';
export default class Form extends BaseComponent {
constructor(props) {
super(props);
this.state = {};
}
render() {
var classString = this.props.className ? this.props.className : '';
var classArray = ['_common-form', this.props.type ? 'form--' + this.props.type :  'form--basic' ];
for(var i = 0; i < classArray.length; i++){
if(classArray[i]){
classString = classString + ' ' +classArray[i];
}
}
var props = {
type: this.props.type,
className: classString,
style: this.props.style,
onSubmit: this.props.onSubmit
};
return React.createElement(
'form', 
props, 
this.newChildren
);
}
componentWillMount() {
this.inputs = {}; 
this.model = {}; 
this.newChildren = [];
this.registerInputs(this.props.children);
}
registerInputs(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));
}
attachToForm(component) {
this.inputs[component.props.name] = component;
this.model[component.props.name] = component.state.value;
}
detachFromForm(component) {
delete this.inputs[component.props.name];
delete this.model[component.props.name];
}
}

ModalComponent:

'use strict';
import React from 'react';
import Modal from '@client/common/modal';
import Button from '@client/common/buttons';
import AddParticipant from './add_participant'; 
import Form from '@client/common/form_elements';
import Input from '@client/common/form_elements/input.js';
import SlideToggle from '@client/common/form_elements/slide_toggle.js';
import FormField from '@client/common/form_elements/form_field.js';
import FormSection from '@client/common/form_elements/section.js';
import BaseComponent from '@client/base-component'; 
export default class EditTeam extends BaseComponent {
constructor(props) {
super(props);
this.state = { 
values: {
name: props.team.name,
mission: props.team.mission,
globalSearch: props.team.globalSearch,
public: props.team.public,
witcryptSecured: props.team.witcryptSecured
},
addParticipantModal: false
};
}
render() {
var participantsList = [];
this.props.team.participants.forEach(function(participant) {
participantsList.push(
<div className="participant" key={participant.key}>
<span className="participant-avatar" style={{backgroundImage:`url("${participant.avatar}")`}}></span>
<span>{participant.name}</span>
<span className={`${participant.roll}-action roll`}>{participant.roll}<a></a></span>
</div>
);
}.bind(this));
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>
);
}
toggleAddParticipantModal() {
this.setState({
addParticipantModal: !this.state.addParticipantModal
});
}
handleCheckedChange(event){
var newState = this.state;
newState.values[event.target.name] = !newState.values[event.target.name];
this.setState(
newState
);
}
handleInputChange(event){
var newState = this.state;
newState.values[event.target.name] = event.target.value;
this.setState(
newState
);
}
saveChanges(e){
e.preventDefault(); 
}
}

source d'informationauteur ReganPerkins