Réagir (Facebook): de l'état à gestion contrôlée des cases à cocher

Dans votre render fonction, la portée de this pour la checks fonction de mappage est différent de render, qui est le champ d'application vous avez besoin pour __changeSelection, donc this.__changeSelection de ne pas localiser un __changeSelection de la propriété. Si vous ajoutez un .bind(this) à la fin de la fonction de mappage, vous pouvez lier son champ d'application pour la même this comme render:

var checks = this.state.data.map(function(d) {
return (
<div>
<input type="checkbox" data-id={d.id} checked={d.selected} onChange={this.__changeSelection} />
{d.id}
<br />
</div>
);
}.bind(this));

Sur une note de côté, je voudrais juste passer le id à la fonction de gestionnaire au lieu de l'affectation des données-attributs. Cela permettra d'éliminer la nécessité de localiser cet élément dans votre gestionnaire de:

var checks = this.state.data.map(function(d) {
return (
<div>
<input type="checkbox" checked={d.selected} onChange={this.__changeSelection.bind(this, d.id)} />
{d.id}
<br />
</div>
);
}.bind(this));

Puis mettre à jour votre __changeSelection fonction pour passer dans le id comme le premier arg et supprimer l'attribut de recherche de ligne:

__changeSelection: function(id) {
var state = this.state.data.map(function(d) {
return {
id: d.id,
selected: (d.id === id ? !d.selected : d.selected)
};
});
this.setState({ data: state });
}

Voici un exemple de tout cela mis ensemble, avec un jsfiddle pour vous de l'essayer:

/** @jsx React.DOM */
var Test = React.createClass({
getInitialState: function() {
return {
data: [
{ id: 1, selected: false },
{ id: 2, selected: false },
{ id: 3, selected: false },
{ id: 4, selected: false }
]
};
},
render: function() {
var checks = this.state.data.map(function(d) {
return (
<div>
<input type="checkbox" checked={d.selected} onChange={this.__changeSelection.bind(this, d.id)} />
{d.id}
<br />
</div>
);
}.bind(this));
return (
<form>
<input type="checkbox" ref="globalSelector" onChange={this.__changeAllChecks} />Global selector
<br />
{checks}
</form>
);
},
__changeSelection: function(id) {
var state = this.state.data.map(function(d) {
return {
id: d.id,
selected: (d.id === id ? !d.selected : d.selected)
};
});
this.setState({ data: state });
},
__changeAllChecks: function() {
var value = this.refs.globalSelector.getDOMNode().checked;
var state = this.state.data.map(function(d) {
return { id: d.id, selected: value };
});
this.setState({ data: state });
}
});
React.renderComponent(<Test />, document.getElementById('content'));