Reagire: evitare boilerplate componente controllato

Question

Così sto solo chiedendo per curiosità,

Chiunque ha trovato un modo intelligente per gestire i dati a 2 vie vincolante nei componenti controllati (di ingresso, selezionare, ...) senza dover scrivere tutti i seguenti:

getInitialState: function() { 
    return {value: 'Hello!'}; 
    }, 
    handleChange: function(event) { 
    this.setState({value: event.target.value}); 
    }, 
    render: function() { 
    var value = this.state.value; 
    return <input type="text" value={value} onChange={this.handleChange} />; 
    } 

Answer 1

Si consiglia la sezione "bidirezionale Binding aiutanti" della documentazione da leggere: http://facebook.github.io/react/docs/two-way-binding-helpers.html

c'è questa LinkedStateMixin:

var NoLink = React.createClass({ 
    getInitialState: function() { 
    return {message: 'Hello!'}; 
    }, 
    handleChange: function(event) { 
    this.setState({message: event.target.value}); 
    }, 
    render: function() { 
    var message = this.state.message; 
    return <input type="text" value={message} onChange={this.handleChange} />; 
    } 
}); 


var WithLink = React.createClass({ 
    mixins: [React.addons.LinkedStateMixin], 
    getInitialState: function() { 
    return {message: 'Hello!'}; 
    }, 
    render: function() { 
    return <input type="text" valueLink={this.linkState('message')} />; 
    } 
}); 

Answer 2

Un trucco che vale la pena conoscere - in quanto l'evento onChange bolle, si può avvolgere input di form in un contenitore e registrare il onChange su che invece - <form> è perfetto per questo.

Poi si può scrivere un onChange gestore generico che estrae i dati da quello del target dell'evento - è necessario aggiungere alcune informazioni di identificazione al campo, che è ciò che l'attributo name è per ogni caso.

Ecco uno Gist with an example implementation e uno live demo in azione: lo stato di input del modulo viene visualizzato sotto il modulo.