React.js Bindings 2-way: percorso profondo a due livelli in Valisuek

Question

Il mio stato è:

[
  {type: "translateX", x: 10},
  {type: "scaleX", x: 1.2}
]

.

Sto usando helpers di rilegatura a due vie e posso 'T Fornire una stringa di tasti validi per linkState:

this.state.map(function(item, i) {
  return <div><input valueLink={this.linkState( ??? )}></div>
}

.

Sarebbe bello se this.linkState accettò qualche sintassi di query, ad esempio "0.type" per recuperare "translateX" dal mio esempio.

Ci sono soluzioni alternative?

---

.

Ho scritto DEEPLinkState Mixin che è una sostituzione a drop-in per react.addons.LINKEDSTATEMIXIN.Esempio di utilizzo:

this.state.map(function(item, i) {
  return <div><input valueLink={this.linkState([i, "x"])}></div>
}

.

linkState("0.x") è anche la sintassi accettabile.

Answer 1

Modifica:

Ho capito che il sentiero profondo per LinkedState è abbastanza bello, quindi cerco di implementarlo.
Il codice: https://gist.github.com/tungd/8367229
Utilizzo: http://jsfiddle.net/uhm6k/3/

---

.

Come indicato il documento, LinkedState è un wrapper attorno alla generazione di onChange/setState e inteso per un caso semplice.Puoi sempre scrivere il onChange/setState completo per ottenere ciò che desideri.Se vuoi veramente attaccare con LinkedState, puoi usare la versione non mixin, ad esempio:

getInitialState: function() {
    return { values: [
        { type: "translateX", x: 10 },
        { type: "scaleX", x: 1.2 }
    ]}
},
handleTypeChange: function(i, value) {
    this.state.values[i].type = value
    this.setState({ values: this.state.values })
},
render: function() {
    ...
    this.state.values.map(function(item, i) {
        var typeLink = {
            value: this.state.values[i].type,
            requestChange: this.handleTypeChange.bind(null, i)
        }
        return <div><input valueLink={typeLink}/></div>
    }, this)
    ...
}

.

Qui sta funzionando Jsfiddle: http://jsfiddle.net/srbgl/

Answer 2

Puoi implementare il tuo mixin se il mixina di base non ti soddisfa.

Vedi come questo mixin è implementato:

var LinkedStateMixin = {
  /**
   * Create a ReactLink that's linked to part of this component's state. The
   * ReactLink will have the current value of this.state[key] and will call
   * setState() when a change is requested.
   *
   * @param {string} key state key to update. Note: you may want to use keyOf()
   * if you're using Google Closure Compiler advanced mode.
   * @return {ReactLink} ReactLink instance linking to the state.
   */
  linkState: function(key) {
    return new ReactLink(
      this.state[key],
      ReactStateSetters.createStateKeySetter(this, key)
    );
  }
};

/**
 * @param {*} value current value of the link
 * @param {function} requestChange callback to request a change
 */
function ReactLink(value, requestChange) {
  this.value = value;
  this.requestChange = requestChange;
}

.

https://github.com/facebook/ react / blob / fc73bf0a0abf739a9a8e6b1a5197Dab113e76f27 / src / addons / link / linkedstatemixin.js https://github.com/facebook/react/blob /fc73bf0a0abf739a9a8e6b1a5197Dab113e76f27/src/addons/link/reactlink.js

Quindi puoi facilmente provare a scrivere la tua funzione linkState basata su quanto sopra.

linkState: function(key,key2) {
  return new ReactLink(
    this.state[key][key2],
    function(newValue) {
      this.state[key][key2] = newValue;
    }
  );
}

.

Avviso che non ho usato il ReactStateSetters.createStateKeySetter(this, key). https://github.com/facebook/react/blob/fc73bf0a0abf739a9a8e6b1a5197dab113e76f27 /src/core/reactstatetters.js . Guardando nuovamente il codice sorgente che puoi scoprire che questo metodo non fa così tanto tranne che crea una funzione e piccole ottimizzazioni nella cache:

function createStateKeySetter(component, key) {
  // Partial state is allocated outside of the function closure so it can be
  // reused with every call, avoiding memory allocation when this function
  // is called.
  var partialState = {};
  return function stateKeySetter(value) {
    partialState[key] = value;
    component.setState(partialState);
  };
}

.

Quindi dovresti assolutamente provare a scrivere il tuo mixin. Questo può essere molto utile se hai nel tuo stato un oggetto complesso e vuoi modificarlo attraverso l'API dell'oggetto.

Answer 3

Lo faccio senza utilizzare Addon Value-Link.

Ecco una demo: http://wingspan.github.io/Le forme di alette / esempi / form-gemelli /

La salsa segreta è solo definire una funzione di onchange:

onChange: function (path, /* more paths,*/ value) {
    // clone the prior state
    // traverse the tree by the paths and assign the value
    this.setState(nextState);
}

.

Usa tutto questo:

<input 
    value={this.state['forms']['0']['firstName']} 
    onChange={_.partial(this.onChange, 'forms', '0', 'firstName')} />

.

Se hai molte coppie (value, onChange) che devi passare dappertutto dappertutto, potrebbe avere senso definire un'astrazione attorno a questo simile al reactlink, ma personalmente sono andato molto lontano senza usare reactlink.

I miei colleghi e recentemente apro di provenzione wingspan-forms , una libreria reattiva che aiuta conStato profondamente annidato.Sfruttiamo pesantemente questo approccio.Puoi vedere altre demo di esempio con stato collegato sulla pagina GitHub.

Answer 4

Ho scritto un blogpost a riguardo: http://blog.sendsonaar.com/2015/08/04/angular-like-deep-path-data-bindings-in-react/

Ma fondamentalmente ho creato un nuovo componente che accetterebbe lo "stato" del genitore e un percorso profondo, quindi non devi scrivere codice extra.

<MagicInput binding={[this, 'account.owner.email']} />

.

C'è anche una jsfiddle in modo da poter giocare con esso

Answer 5

Ecco il tutorial che spiega come gestire cose come questa.

Stato e forme in reagire, parte 3: Gestire lo stato complesso

TL; DR:

0) Non utilizzare collegamenti standard.Usa .

1) Cambia il tuo stato per assomigliare a questo:

collection : [
  {type: "translateX", x: 10},
  {type: "scaleX", x: 1.2}
]

.

2) Take link al collection:

var collectionLink = Link.state( this, 'collection' );

.

3) Iterare attraverso i collegamenti ai suoi elementi:

collectionLink.map(function( itemLink, i ) {
  return <div><input valueLink={itemLink}></div>
})

.

Answer 6

Ho preso un approccio diverso che non impiega mixins e non muta automaticamente lo stato

See github.com/mcmlxxxviii/react-value-link