ReactJS la mise à jour de l'état de l'enfant
j'utilise ReactJS avec CoffeeScript (:
en fait j'ai un composant A qui gère un État. Un champ d'état est transmis à l'enfant (appelé myChild dans cet exemple). L'enfant doit mettre à jour certaines valeurs de l'état parent.
Comment puis-je faire cela de la manière réactualisée ?
A = React.createClass
getInitialState:
mystate: {test: 1}
render: ->
myChild {param: @state.mystate}
myChild = React.createClass
render: ->
React.DOM.div {onClick: @change}, @props.param.test
change: ->
@props.param.test += 1 # WRONG WRONG WRONG
ajax("/..../", JSON.stringify(@props.param))
.done(@onDone).fail(...)
onDone: ->
console.log "Hum..."
Commentaires:
-@accessoires.param.test ne peut pas être modifié comme cela (pour la cohérence et il doit être immuable).
-@accessoires.param est en fait la objet à l'intérieur de l'état du composant A, donc il doit être mis à jour avec @setsate ce qui n'est pas possible puisque nous sommes dans l'enfant: (
Comment puis-je effacer cela pour avoir un bon composant de Réactjs ?
Paul ? Allez-vous encore m'aider ? : D
1 réponses
le parent est la source de la vérité, donc l'enfant doit dire au parent de changer son état. Passer un rappel de la mère à l'enfant, et l'enfant l'appelle.
Il y a un exemple sur la communication entre composants dans les docs de React qui pourraient être utiles aussi.
A = React.createClass
getInitialState: ->
mystate: {test: 1}
incrementTest: ->
@setState {mystate: {test: @state.mystate.test + 1}}
render: ->
myChild {onChange: @incrementTest, param: @state.mystate}
myChild = React.createClass
render: ->
React.DOM.div {onClick: @change}, @props.param.test
change: ->
@props.onChange
ajax("/..../", JSON.stringify(@props.param))
.done(@onDone).fail(...)
onDone: ->
console.log "Hum..."